web和微信小程序input输入时禁止输入中文方法

前言：作为一个小白～～，每天进步一点点，每天总结一点点，生活就会美好一点～

--------------------------------

进入正文

1.首先禁止输入中文就需要用到正则表达式；

2.其次在input输入框操作，就需要了解input输入框的事件；

3.再看微信小程序中，那么就要知道和web是有区别的；

按照上面的3个知识，我们依次来解释～

1.禁止输入中文的正则表达式为：reg = /[\u4e00-\u9fa5]/ig;

2.在键盘输入的时候判断输入的是否是中文，则需要用到：onkeyup事件。那么，有个问题就是小程序中input没有是没有这个事件的，通过查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/input.html知道可以用：bindinput事件代替。

3.整合前两个web中input输入时禁止中文可以用：

而小程序代码为：

js代码为：

handleInput(e) {

let value = (e.detail.value || '').trim()

if (value) {

const reg = /[\u4e00-\u9fa5]/ig

if ((reg.test(value))) {

value = value.replace(reg, '')

wx.showToast('不允许输入中文')

}

this.setData({ value })

}

综上，今天的问题解决～

web和微信小程序input输入时禁止输入中文方法相关推荐

实现微信小程序输入框输入时页面不上移【完美 ~_~】
之前做过的小程序里面这种功能不是太重要,所以有点小瑕疵也一直没去理它.但是这次的小程序有一个话题评论功能,要求比较高,查csdn翻文档好半天终于实现了第一步:输入框固定在页面底部 + 适配底部安全区 ...
微信小程序，输入时键盘弹起，聊天输入框自动弹起，内容不顶起
先看效果代码: index.js const app = getApp() Page({data:{statsuBarHeight: app.globalData.statsuBarHeight,h ...
微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...
web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
解决微信小程序银行卡号输入转换格式
解决微信小程序银行卡号输入转换格式问题 ps:2017-02-17 19:44 (发现新bug,暂已解决优化中) 新手第一次写博客,请多多见谅! (感觉会有更好的办法,希望有大牛能对我指点指点) 输入 ...
小程序数据框有重影_微信小程序input重影什么原因?怎么解决重影?
微信小程序input重影什么原因?怎么解决重影?微信小程序input输入框输入出现了重影的情况,这是什么原因呢?又该怎么去解决微信小程序input重影问题. 微信小程序input重影怎么办? 问题描述 ...
微信小程序自定义输入仿咸鱼发布
微信小程序自定义输入仿咸鱼发布效果图效果图2 主要代码 .js // pages/user/release/release.js import Toast from 'vant-weapp/toa ...
简单实现微信小程序 input 的双向绑定
简单实现微信小程序 input 的双向绑定 data 中定义表单数据 data:{formData:{} } wxml 中,利用 data- 传递参数到逻辑层 <input bindinput= ...
android获取小程序音频时长,最新微信小程序获取音频时长与实时获取播放进度...
#微信小程序获取音频时长与实时获取播放进度在小程序官方文档中 audio 注意:1.6.0 版本开始,该组件不再维护.建议使用能力更强的 wx.createInnerAudioContext 接口 ...

web和微信小程序input输入时禁止输入中文方法

按照上面的3个知识，我们依次来解释～

web和微信小程序input输入时禁止输入中文方法相关推荐

最新文章

热门文章