精华内容
下载资源
问答
  • bindblur:离开文本框时出发 代码实例 //bindinput:输入一个字节一触发 <input name="toname" class="value" value="{{userInfo.nickName}}" bindinput="setToName"></input> //bindblur:离开时出发 &...

    bindinput:输入一个字节一触发
    bindblur:离开文本框时出发

    代码实例

    //bindinput:输入一个字节一触发
    <input name="toname" class="value" value="{{userInfo.nickName}}" bindinput="setToName"></input>
    //bindblur:离开时出发
    <input name="toname" class="value" value="{{userInfo.nickName}}" bindblur="setToName"></input>
    
    展开全文
  • 微信小程序文本框限制输入字数

    万次阅读 2018-10-17 18:44:24
    // 文本框字数限制 limit: function (e) { var value = e.detail.value; var length = parseInt(value.length); if (length > this.data.noteMaxLen) { return; } this.setData({ current: ...
    效果图

    在这里插入图片描述

    wxml代码
    <view style="border: 1px solid #FFA6A6; border-radius: 10px;">
         <textarea placeholder-class="place-holder"  placeholder="请从以下四个方面填写求求职简介 1. 教育背景介绍,如学校专业描述、个人学习成绩奖学金情况  2. 技能介绍(多描述就业相关技能),培训证书等  3. 描述实习经历、社会实践经历,或者社团经历 4. 希望从事的领域及职位 " name="introduction" maxlength='300' bindinput='limit' value="{{text}}" style="font-size: 14px;"/>
    
          <!-- 显示字数 -->
          <view class="clear"><text style="color: #ccc; font-size: 14px; float: right; margin-right: 2%;">{{current}} / {{max}} (最多可写300字)</text></view>
    </view>
    
    js代码:
    Page({
    	data: {
    		// 字数限制
       		current: 0,
        	max: 300,
    	},
    	 // 文本框字数限制
      	limit: function (e)  {
        	var value = e.detail.value;
        	var length = parseInt(value.length);
    
       	 if  (length > this.data.noteMaxLen) {
          	return;
       	 }
    
        	this.setData({
          	current: length
        	});
      	},
    })
    
    展开全文
  • 小程序 textarea 在真机上很多bug,又没有其他的组件可以代替,最常见就是 当页面出现滚动条,placeholder 默认提示文本会被固定到初始位置,textarea 的点击区域也会错位,再次点击的时候又能恢复?要解决这个Bug...

    小程序 textarea 在真机上很多bug,又没有其他的组件可以代替,最常见就是 当页面出现滚动条,placeholder 默认提示文本会被固定到初始位置,textarea 的点击区域也会错位,再次点击的时候又能恢复?

    要解决这个Bug其实也简单,既然 textarea 的显示有问题,那么我们可以在显示的时候使用 view 组件代替,当用户点击 view 组件的时候,替换为 原来的 textarea 输入框即可,唯一的不足就是文字会闪动一下,这倒是可以接受。

    实现原理

    1、定义一个文本框的初始变了 textFocus,默认为 false,同时当这个变量为false 的时候,隐藏 textarea 文本框,同时显示 view 组件。

    2、当用户点击 view 的时候,设置 textFocus 为 true,显示 textarea 文本框,隐藏 view 组件。

    3、单是前面两个步骤还不够,在文本框失去焦点的时候,我们还要还原初始状态,实现的代码如下。

    aa17b0e118a4d47aa065abef0016b45d.png
    5dadf08be22f56866d02ec8139746927.png

    这里不能使用 wx:if 来判断 textarea 显示隐藏,因为if会重新渲染页面,需要一定的时间,会造成莫名其妙的Bug。

    展开全文
  • 小程序 textarea 在真机上很多bug,又没有其他的组件可以代替,最常见就是 当页面出现滚动条,placeholder 默认提示文本会被固定到初始位置,textarea 的点击区域也会错位,再次点击的时候又能恢复?要解决这个Bug...

    小程序 textarea 在真机上很多bug,又没有其他的组件可以代替,最常见就是 当页面出现滚动条,placeholder 默认提示文本会被固定到初始位置,textarea 的点击区域也会错位,再次点击的时候又能恢复?

    要解决这个Bug其实也简单,既然 textarea 的显示有问题,那么我们可以在显示的时候使用 view 组件代替,当用户点击 view 组件的时候,替换为 原来的 textarea 输入框即可,唯一的不足就是文字会闪动一下,这倒是可以接受。

    实现原理

    1、定义一个文本框的初始变了 textFocus,默认为 false,同时当这个变量为false 的时候,隐藏 textarea 文本框,同时显示 view 组件。

    2、当用户点击 view 的时候,设置 textFocus 为 true,显示 textarea 文本框,隐藏 view 组件。

    3、单是前面两个步骤还不够,在文本框失去焦点的时候,我们还要还原初始状态,实现的代码如下。

    473d810e9be54236d3652fdc113e9b0c.png
    90241ac1e75d62399f7777568545ea32.png

    这里不能使用 wx:if 来判断 textarea 显示隐藏,因为if会重新渲染页面,需要一定的时间,会造成莫名其妙的Bug。

    展开全文
  • <!--pages/index29/index29.wxml--> <page> <view class="conts">...textarea class="areas" placeholder='个性签名' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs">...
  • inputNum: function (e) { return this.checkInputText(e.detail.value); }, //检查输入文本,限制只能为数字并且数字最多带2位小数 checkInputText: function (text) { var reg = /^(\.*)(\d+)(\.?...
  • ## 这是自己做的一个自己制定方案的代码。包括了很多的知识点,希望能帮助大家。 WXML文件 <view class="intro" > <form bindsubmit="formSubmit" bindreset="formReset"> ...view class="section">...
  • 一个很简单的功能实现,先看效果界面。...新建一个小程序,建立普通快速启动模板。 所有东西都不用动, pages/index/index.wxml代码用如下的替换:<form bindsubmit="formBindsubmit" bindreset="formRese
  • 微信小程序自动完成文本框autocompletetext 仅供参考!!!!!!
  • 小程序开发组件中使用了文本框组件,鼠标点击无法获取焦点,输不了内容(这里移动端事实上是可以输入的,只是pc端的模拟器输入不了),wxml和js代码如下: &lt;input placeholder="请输入运单号" ...
  • 微信小程序|文本框和页面分割线

    千次阅读 2019-12-26 00:00:00
    欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述如何制作一个文本框,并改变其在页面所处位置?如何...
  • 微信小程序获取文本框值方案

    千次阅读 2018-07-11 10:34:24
    wxml:使用 bindinput&lt;input class='username' placeholder="用户名" bindinput="username"&gt;&lt;/input&gt;js:Page({ ... this.data.username = e.de...
  • <view class='textarea-count'> <textarea placeholder='请输入文字' bindinput="getWords" maxlength='{{maxTextLen}}'></textarea> <view class='text-count-display f f-end'>...
  • <!--监听button点击事件--> <button bindtap="Button" type="primary">弹出modal</button> ...modal hidden="{{hiddenModal}}" title="驳回意见" confirm-text="确认" cancel-text=...
  • 开发中会遇到获取文本框text以及输入框input的数据,这里就来记录一下最基本的使用方法: 首先在.wxml里写好text和input两个组件 <view class="inputname"> <text class="textnormal">{{completed}...
  • 1.页面效果 2.代码 2.1 wxml文件 2.2 js文件
  • 如图: .wxml代码 ``` 输入中文姓名" /> <button type="primary" bindtap="loginBtnClick"> 确认提交 ``` .js代码 ``` ...运行一直判断MyName为空,明明填写值也会进入判断,求指教
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述如何更改小程序页面中的文本框颜色和边框样式?如何...
  • 最近打算把用Android开发的一款小应用做成微信小程序,由于用到了Android的自动完成文本框(AutoCompleteTextView),又想在微信小程序里做到用户体验一致,就要找一个类似的组件来用。粗略搜了一下,目前还没发现有...
  • 在移动端里, 当输入框处于页面比较下方的时候回发生键盘覆盖输入框的情况, 在小程序中也发生了类似情况, 但小程序提供了一些api, 但不能达到需求. 这里来简单说一下解决思路. 小程序的默认行为 在发生了键盘覆盖...
  • 答题微信小程序实现(1):单题实现和随机数获取

    万次阅读 多人点赞 2018-01-14 21:22:47
    实现1,调用form组件,调用form组件详见《详解微信小程序文本框(label/input)、按钮(button)用法,以登陆界面为例》http://blog.csdn.net/sinat_41310868/article/details/78926227。答题和登陆差不多,答
  • 问题描述:正常显示应该如下 真机测试时有些机型显示如下,样式丑陋 问题解决: 限制输入手机号这一组件的宽度,添加style="width:{{'200rpx'}}" ...input placeholder="请输入您的手机号" type='number' ...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 155
精华内容 62
关键字:

微信小程序文本框

微信小程序 订阅