解决小程序input输入框只能输入英文字母，不能输入汉字

最新推荐文章于 2024-08-22 21:54:01 发布
最新推荐文章于 2024-08-22 21:54:01 发布
阅读量3.5k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 小程序 文章标签： 前端 java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_17211063/article/details/130346316

需求：最近在做小程序时，遇见了一个问题，就是我的input输入框不能输入中文，默认是英文键盘，还不能切换（尽管我已经给定了属性 type="text"）

解决方法： 

//这是我使用的input框
<input type="text" class="weui-input" name="userName" placeholder="请输入用户名" value="{{loginForm.userName}}" />

在这个input框下面再重新加一个input框，并做相关的设置
<input type='text' class="inptHideen"></input>

给额外添加的input做设置，需要再wxss中给样式

.inptHideen{height:0px !important;min-height:1px !important;}

因为小程序中默认是给了input的最低高度

如果只设置高度的话，虽然有时候在开发工具中看着没问题

但是在真机中，还是会显示额外添加的那个input框

所以给须要把最低高度重新设置

完美解决        (#^.^#) 

解决uniapp微信小程序，input框设置了maxlength时，ios在输入时拼音达到了最大长度导致无法继续输入问题
qq_75069372的博客
01-22 1912
解决uniapp微信小程序，input框设置了maxlength时，ios在输入时拼音达到了最大长度导致无法继续输入问题
微信小程序 input 不能输入特殊字符的方法
joe0235的博客
04-19 1101
微信小程序开发中经常遇到有表单提交的需求，一些特殊的字段要过滤掉特殊字符。比如姓名、籍贯、地址等，都要实现不能输入特殊字符的功能，可以创建一个统一的方法来处理输入事件，并在这个方法中检查输入的字符。请注意，这个示例在输入非符合正则表达式时会清空输入框，这可能会影响到部分用户的体验感。
小程序文本输入，中英文输入的一个不起眼小坑
纠缠AI的亮子
10-07 3588
在中文输入法下，输入英文，要点击“确定”才真正输入： 输入框绑定事件 bindinput, bindconfirm 都可以获取输入内容（event.detail），但是这里有个区别： bindinput 能够获取没有点击“确定”，未真正输入的内容，这里例子就是“abcd” bindconfirm 不能获取到这个内容“abcd” ...
微信小程序只能输入数字和字母
feelinghappy的专栏
04-29 6458
微信小程序的input组件中有个bindinput属性，用来实时检测输入的内容，只需要在返回的时候，使用正则表达式处理输入的内容，然后返回到输入框。 <input type='text' bindinput="inputCode" placeholder='请输入密码' password="true"></input> 1.只能输入英文 inputCode: function(e) { let pwd = e.detail.value return pw
关于微信小程序 input 的 type属性值区别
夏沫之初的博客
10-24 1923
注意2:如果需要点击input输入框，不唤起手机键盘，可以将input的disabled属性值改为true，当然，此时input也将无法输入内容。idcard：数字键盘（无小数点、有个 X 键）----可输入整数、X，一般用来输入身份证号用。注意1：number 与digit 区别是，number不能输入小数点，而digit可以。digit：数字键盘（有小数点）----可输入数字、小数点。number：数字键盘（无小数点）---只可输入整数。text：文本输入----可输入中文、英文、符合等。
input只能输入英文
Luck.Zhang_LA
04-24 7104
只能输入英文 onkeyup=”value = value.replace(/[^a-zA-Z]/g, ”)”
web和微信小程序input输入时禁止输入中文方法
weixin_38044564的博客
12-27 4718
前言：作为一个小白～～，每天进步一点点，每天总结一点点，生活就会美好一点～ -------------------------------- 进入正文 1.首先禁止输入中文就需要用到正则表达式； 2.其次在input输入框操作，就需要了解input输入框的事件； 3.再看微信小程序中，那么就要知道和web是有区别的； 按照上面的3个知识，我们依次来解释～ 1.禁止输...
input不允许输入汉字，只可输入数字和字母等
温柔雨哥的博客
04-29 1万+
禁止在input中输入中文
input只允许输入英文 或数字
ddf__的博客
12-31 2812
3.input只允许输入英文或数字（可以限制长度）1.input只允许输入英文。2.input只允许输入数字。
uniapp-vue页面input输入框在ios系统下用中文输入法输入字母获取不到值的问题
xiwangkeji1007的博客
10-10 3032
input输入框在ios系统下用中文输入法输入字母v-model绑定变量获取不到值得问题，在app端下nvue页面没有这个问题，vue页面、H5端会出现这个问题，下面以uniapp官方演示项目为例说明： 注意看 实时获取输入值 这一行，预期效果为 输入框输入字符以后 标题视图实时变更为输入值，但是在ios下用中文输入法输入字母不会引发v-model绑定值同步更新事件。经测试，在苹果手机下用中文输入法输入中文没有问题，但是输入字母的话就会产生这个BUG，造成提交表单时视图层看到的数值和实际逻辑层提交的数值不一
input只能输入数字英文字母汉字
12-24
input只能输入数字英文字母汉字
js控制文本框禁止输入特殊字符详解
10-20
本文将详细介绍如何使用JavaScript来禁止在文本框中输入特殊字符，以及如何控制文本框只能输入特定类型的数据，例如仅数字、仅数字和小数点、仅英文、仅英文和数字等。 ### 知识点一：理解正则表达式 首先，要控制...
html文本框 切换中文输入法,解决 React 中的 input 输入框在中文输入法下的 bug
weixin_29064103的博客
06-04 1050
以下会涉及到的技术点：react mobx compositionstart compositionupdate compositionend问题描述在使用 input 时，通常会对输入的内容做校验，校验的方式无非两种：允许用户输入，并且做错误提示；不允许用户输入正则或者函数匹配到的字符。现有如下需求：“仅允许输入英文、数字和汉字，不允许输入其他特殊字符和符号”。显然这种场景需要使用第二种校验方式...
uniapp判断输入框只能含有中文，或者中文数字组合，中文字母组合，中文破折号组合，，不能全数字，全英文，全特殊字符
最新发布
06-21
不允许：全数字、全英文、全特殊字符（注意：特殊字符这里我们理解为非中文、非数字、非字母、非破折号的其他字符，但这里要求的是不能全为特殊字符，而我们的输入中允许有破折号，但破折号我们视为允许的特殊字符？...
让input框只输入英文
dan_seek的博客
05-24 4196
解决扫码枪在中文输入法时扫码冲突。扫码枪在扫完码时会自动回车，这时如果是中文输入法就会触发输入法联想，再加一个回车，那么input框输入的就成中文了。如果可以控制input框只能输入英文那就好了。css有一个属性（ime-mode）轻松就可以解决，但可惜的是该属性只能在IE浏览去有效，webkit内核浏览器不支持，放弃！styleime-modedisabled文本框当type=password时，输入法就是英文，但是显示的是一堆点点点。
input不能输入中文
iteye_12689的博客
10-21 254
var obj = $("#mobileSystemCode"); var obj_value= obj.val(); obj_value = jQuery.trim(obj_value); //保存时有非空验证，这里要取消掉 if($.trim(obj_value)!=""){ var expression = /[\u4E00-\u9FA5]/; va...
微信小程序限制input输入框不能输入汉字
高安博客
07-16 4348
做项目时，有一个输入框需要输入微信号，限制一下，不能输入汉字 // 获得输入的微信号，限制不能输入汉字 weixinInput: function (e) { var that = this console.log(e) console.log("带你去爬山！") let value = (e.detail.value || "").trim() console.log(value) if (value) { const reg = /[
input框输入中文时，输入未完成触发事件。Vue中文输入法不触发input事件？
study_way的博客
10-23 3563
前言 在做搜索输入框时，产品期待实时搜索，就是边输入边搜索，然而对于中文输入法出现的效果，不同的产品可能有不同的意见，有的觉得输入未完成也应该触发搜索。但有的却认为应该在中文输入完成后再触发搜索。我发现在vue中通过v-model绑定的输入框的值，确时正常的，在中文输入未完成的时候不会修改value的值。针对这两种情况，分别做了屏蔽输入过程的change事件和vue中触发change事件。毕竟不同的需求有不同的效果，为了满足各种情况，还是都掌握的好。 如何屏蔽中文输入过程的change事件 在输入拼音过程也
Pycharm最新版input无法输入中文解决方案
热门推荐
神的博客
08-22 1万+
下载的最新版Pycharm中input无法输入中文，而输入英文却是正常的。
uniapp小程序校验input输入框只能输入数字和逗号
05-14
### 实现 UniApp 小程序 Input 输入框校验 在 UniApp 中实现对 `input` 输入框的校验功能，可以通过正则表达式来限制用户的输入内容。以下是针对仅允许输入数字和逗号的具体解决方案。 #### 使用正则表达式进行校验 为了确保用户只能输入数字和逗号，可以定义一个正则表达式 `/^[0-9,]*$/` 进行匹配[^4]。该正则表达式的含义如下： - `^`: 表示字符串的开头。 - `[0-9,]`: 表示只允许字符集中的数字 (0 到 9) 和逗号 `,` 出现。 - `*`: 表示前面的字符集可以重复零次或多次。 - `$`: 表示字符串的结尾。 当用户每次修改输入框的内容时，可以通过监听 `input` 或 `bindinput` 事件，在回调函数中实时验证输入值是否符合此正则表达式的要求。 #### 示例代码 以下是一个完整的代码示例： ```html <template> <view class="container"> <!-- 绑定 input 的 bindinput 事件 --> <input type="text" placeholder="请输入数字和逗号" @input="handleInput" /> <view v-if="errorMessage">{{ errorMessage }}</view> <!-- 显示错误提示 --> </view> </template> <script> export default { data() { return { inputValue: '', // 存储当前输入框的值 errorMessage: '' // 错误消息 }; }, methods: { handleInput(event) { const value = event.detail.value; // 定义正则表达式 const regex = /^[0-9,]*$/; if (!regex.test(value)) { // 如果不符合正则条件 this.errorMessage = '输入非法，请只输入数字和逗号'; // 提示错误信息 this.inputValue = value.replace(/[^0-9,]/g, ''); // 移除非法字符并更新值 } else { this.errorMessage = ''; // 清空错误信息 this.inputValue = value; // 更新合法值 } } } }; </script> <style scoped> .container { padding: 20px; } </style> ``` #### 关键点解析 1. **绑定事件**: 使用 `@input` 或 `v-model` 可以捕获到用户输入的变化，并触发相应的处理逻辑。 2. **正则替换非法字符**: 当检测到非法字符时，可通过 `.replace()` 方法移除这些字符[^5]。 3. **用户体验优化**: 在界面中动态显示错误提示信息，帮助用户及时修正输入内容。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值