小程序input textarea 禁止粘贴实现

小程序中没有关于input禁止粘贴的功能，通过监听bindinput来实现禁止粘贴功能

使用场景一般都是在type=number 或者其他不想让用户通过复制的效果来输入错误的数据

思路：

1、bindinput 监听每次输入事件，通过对比当前输入内容长度和上次输入内容长度做判断如果 |当前内容长度 - 上次内容长度| != 1 ，则表示用户不是手动输入的，这时候清空输入框即可

2、|当前内容长度 - 上次内容长度| == 1 ，但是用户通过复制输入了不符合预期的内容，这时候用过正则来判断内容是否合法

3、小程序bindinput 事件中 return是输入框的内容

核心代码(例子是判断手机号)

 //判断当前长度和上次长度对比if (Math.abs(e.detail.value.length - phoneAgain.length) != 1) {this.setData({phoneAgain: ''})return ''} else {//正则判断内容是否合法let reg = /^[0-9]*$/if (!reg.test(e.detail.value)) {this.setData({phoneAgain: ''})return ''}}

小程序input textarea 禁止粘贴实现相关推荐

小程序input textarea 对齐问题
正常我想写一个form表单左边是文字右边是输入框在小程序出现这样一个问题,苹果手机文本域和input 不能同时左对齐文本域总是像加了一个margin-left:20rpx: 解决办法统一.要不全 ...
小程序中textarea层级最高的结局办法
在小程序中textarea层级比较高,当底部有fiexd定位的时候或出现文本框中的文本穿透显示出来,解决办法是在texarea标签下面添加一个view或者text标签来和texarea标签替换使用 & ...
小程序input实现数据双向绑定
小程序input实现数据双向绑定最终效果 index.wxml index.js 最终效果 index.wxml <view class="uploader">< ...
小程序数据框有重影_微信小程序input重影什么原因?怎么解决重影?
微信小程序input重影什么原因?怎么解决重影?微信小程序input输入框输入出现了重影的情况,这是什么原因呢?又该怎么去解决微信小程序input重影问题. 微信小程序input重影怎么办? 问题描述 ...
小程序 input自动聚焦唤起键盘
小程序 input自动聚焦唤起键盘 <input type="text" focus='true' bindconfirm="onConfirm" con ...
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
小程序input调用虚拟键盘阻止系统键盘与虚拟键盘点击穿透问题
解决小程序input调用虚拟键盘并阻止调用系统键盘问题与虚拟键盘点击穿透导致下方input获焦问题点击input弹出虚拟键盘,并不调起系统键盘解决方案 wxml代码 <input type=& ...
小程序input组件获得焦点时placeholder内容有重影
这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...
微信小程序 input 输入框控件 bindinput 没有响应
微信小程序 input 输入框控件 bindinput 没有响应问题: 微信小程序 input 输入框控件 bindinput 没有响应原因: 我以为是我这边的问题,检查很多遍检查不出来,最后换个 ...
微信小程序input为数字键盘
微信小程序input为数字键盘微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点 ...

小程序input textarea 禁止粘贴实现

思路：

核心代码(例子是判断手机号)

小程序input textarea 禁止粘贴实现相关推荐

最新文章

热门文章