欢迎来到 jackNEss'窝窝
I like simple mind

手机上限制字符长度的正确姿势

2015年08月07日

oninput-polo

这次来说说, 移动开发中限制字符长度的正确姿势

按道理来说限制长度就是通过 onpropertychange 或者 oninput 监听输入内容,
然后多的 用 substr 截取掉就可以了

input.addEventListener('input', function(){
    this.value = this.value.substr(0, 8);
});

但是如果使用中文输入法,在我们敲拼音的时候,虚拟输入的拼音内容同样会被
oninput、 onpropertychange 事件监听得到,这就直接导致我们输入“好漂亮” 这
3个中文字在敲拼音还没按确定的时候 会被监听变成 haopiaoliang 12个字符长度。

demo 地址: http://www.jackness.org/lab/2015/mobile-oninput/demo0.html

在这里, 我们引入 2个 新的事件监听 compositionstart, compositionend

compositionstart, compositionend

compositionstart

当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.

compositionend

当浏览器是直接的文字输入时, compositionend会以同步模式触发.

引入方法后,问题得到解决了,在我们输入拼音的时候并没有对我们输入的内容进行阻挡。

var cpLock = false;
input.addEventListener('input', function(){
    if(cpLock){
        return;
    }
    this.value = this.value.substr(0, 8);
}, false);

input.addEventListener('compositionstart', function(){
    cpLock = true;
}, false);

input.addEventListener('compositionend', function(){
    cpLock = false;
}, false);

demo 地址: http://www.jackness.org/lab/2015/mobile-oninput/demo.html

  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS