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

发现表单提交,都是默认允许空格输入,但实际情况下,一般是不能有的,比如修改昵称、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值;

      如何实时统计输入框用户输入字数?


往期回顾:

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

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

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


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

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

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

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

原创文章 114 获赞 270 访问量 46万+

猜你喜欢

转载自blog.csdn.net/weixin_43970743/article/details/105405189