分享EditBox创建账号时只能输入数字和字母

最近在开发过程中遇到一个小问题,就是用户创建账号时需要对输入的字符做限制,但是发现EditBox并没有类似restrict="a-zA-Z"这种方法。在论坛找了好久也没发现个合适的教程。只好自己研究了下。有类似需求的小伙伴可以参考。废话不多说直接进入正题。

查看EditBox的API,发现他有4个监听事件。而我们要用到的就是其中的textChanged。
我们要在textChanged中对正在输入的字符做检测,已达到我们需要的目的。
首先我们先找到对应的正则表达式用来检测输入的字符是否符合我们的要求。
this.reg = new RegExp("^[A-Za-z0-9]+$");

之后再监听中去判断字符并替换掉。

//账号输入限制
onEditBoxChanged(editbox){
    let str = "";
    for(let i = 0; i < editbox.string.length; i++){
        if(this.reg.test(editbox.string.charAt(i))){
            str += editbox.string.charAt(i);
        }
    }
    console.log(str);
    editbox.string = str;
},

这个时候我们发现一个问题,虽然输出是正确的,但是文本并没有改变。而是在触发editing-did-ended才有效果。这并不是我们想要的结果。
于是得出结论,在焦点触发期间,赋值的文本不会有任何变化。只有失去焦点的时候文本才会显示正常。

所以我们就要在赋值的时候做点小动作,接下来我们修改一下这个方法

//账号输入限制
onEditBoxChanged(editbox){
    editbox.blur();  //主动让editbox失去焦点,已达到我们替换文本的目的
    let str = "";
    //这个for循环是为了检测每个字符,因为现在的输入法可以一次性输入多个字符
    for(let i = 0; i < editbox.string.length; i++){
        if(this.reg.test(editbox.string.charAt(i))){
            str += editbox.string.charAt(i);
        }
    }
    console.log(str);
    editbox.string = str;
    editbox.focus();//替换完成后在触发焦点,这样不会导致玩家输入中断。V2.1以下请用setFocus
},

以上就是EditBox限制玩家只能输入数字和字母的完整方法了。觉得有用就给个小心心吧。

7赞

不错不错

感谢分享

:grinning:

主动让editbox失去焦点,会触发editing-did-ended事件,有什么好办法吗

解决了,在基础上优化成在有需要排除的字符情况下才失去焦点,通过自定义输入完成事件,过滤掉因editbox.blur()触发的editing-did-ended事件