微信小程序-input等输入框禁止输入空格-蒲公英云

微信小程序-input等输入框禁止输入空格

小鱼儿 2023-07-24 03:07 77阅读 0赞

发现表单提交，都是默认允许空格输入，但实际情况下，一般是不能有的，比如修改昵称、name等，有空格的输入，就显得不是那么的友好，比如吃鸡，王者等，昵称都是不允许带有空格符，所以，今个儿就来说说，微信小程序中，如何禁止空格符的输入？

其实思路很明确，就是监控输入框，在每一次输入，替换掉输入的空格符；

<input class="inputRemark" name="nickName" value="{
   {nickName}}"
 data-name='nickName' bindinput='inputRemark' placeholder="请输入备注" />
inputRemark: function (e) {
    var nickNameOld = e.detail.value;
    this.setData({
      nickName: nickNameOld.replace(/\s+/g, '')
    })
  },

解析：

1、利用正则表达式：“ /\s+/g ”去匹配空格，然后使用replace将匹配到的空格符替换成 ‘’（空）

2、replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

用法：stringObject.replace(regexp/substr,replacement)

详用请参考：https://www.w3school.com.cn/jsref/jsref_replace.asp

3、同下篇类似，原理就是利用数据双向绑定的特性同步当前input的value值；

  [如何实时统计输入框用户输入字数？][Link 1]

往期回顾：

【1】如何实时统计输入框用户输入字数？

【2】怎么防止用户表单二次提交，你知道吗？

【3】页面如何调用组件内置方法？

❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ

❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～

❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】

❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。