微信小程序输入框字数限制以及计算

wxml代码如下:

<textarea class="textarea-bg font_s33 font_c31" id="information" maxlength='150' placeholder="请输入遇到的问题或建议" name="information" value="{{information}}"bindinput="getDataBindTap"><view class='word' id="counter">{{lastArea}}/150</view></textarea>

wxss代码如下：

.textarea-bg {background-color: #fff;padding:30rpx;width:700rpx;
}
.word{position: absolute;bottom:30rpx;right:30rpx;
}

js代码如下：

      // 获取输入框的值getDataBindTap: function(e) {var information = e.detail.value;//输入的内容var value = e.detail.value.length;//输入内容的长度var lastArea = 150 - value;//剩余字数var that = this;that.setData({information: information,lastArea: lastArea})},

实现效果如下：

微信小程序输入框字数限制以及计算相关推荐

微信小程序~textarea字数限制与计算
先看效果图,是不是自己想要的 1.在textarea中绑定bindinput事件. 2.通过var value = e.detail.value;获取textarea的值. 3.通过 var len ...
微信小程序输入框input
微信小程序输入框input 属性名类型默认值说明 value String 输入框的内容 type String text input的类型,有效值:text,number,idcard,dig ...
小程序中里的bindinput_微信小程序输入框input
微信小程序输入框input 属性名类型默认值说明 valueString 输入框的内容 typeStringtextinput的类型,有效值:text,number,idcard,digit,time ...
微信小程序输入框会字体显示不全或者换行
微信小程序输入框会字体显示不全或者换行问题描述有的时候不同的设备上会出现微信小程序输入框表现不一致,比如:换行,字体显示不全解决方案用开发者工具调试发现,input,textarea 有默认的 ...
微信小程序输入框属性 cursor-spacing 问题
微信小程序输入框属性 cursor-spacing 问题问题描述微信小程序给输入框提供了属性 cursor-spacing,用处是聚焦时光标离软键盘的距离,但是在安卓机子上会出现不太好使,比如,没 ...
微信小程序输入框上移问题
微信小程序输入框上移问题缺陷:输入框顶起整个页面包括自定义顶栏解决方式:给input设置adjust-position="{{false}}"后自定义input高度 wxml ...
微信小程序输入框 input 组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 输入框.该组件是原生组件,使用时请注意相关限制属性类型默认值必填说明最低版本 value string 是输入框的初始内容 1 ...
微信小程序输入框输入换行
今天的每日一测,更新文本输入框中输入换行的问题. 最近在做微信小程序项目的测试,因为输入框中输入换行的问题导致项目上线后出现bug. 具体情况是,在某些文本输入框中,我想到了测试输入换行是否能提交成功 ...
微信小程序自定义相机拍照，计算大小，以及上传
需求:近来微信小程序有个需求,自定义相机拍照,并且要在相机中画一个框,提示用户把拍摄内容放入框中,类似于上传身份证时那个头像,国徽对其的框.(因为我们上传的是一份A4纸的病例),所以需要这样.然后后台 ...

微信小程序输入框字数限制以及计算

微信小程序输入框字数限制以及计算相关推荐

最新文章

热门文章