首页 > 代码库 > 输入框文本输入限制问题以及中文输入法下字符阶段的处理

输入框文本输入限制问题以及中文输入法下字符阶段的处理

        输入框文本字数限制问题以及中文输入法下字符截断处理

    上次博文写过处理实时获取输入表单的值,传送门: 博文地址。这次又需要处理输入框文本字数限制问题,前期的步骤思想其实就是要先实时获取输入框的值然后得到长度。

  使用onkeyup判断字符长度

    可以参考我前面写的博文,地址如上。onkeyup确实是可以做到实时获取的效果,因此我就是使用键盘事件来达到效果。HTML代码:

<div class="content">
    <textarea name="complain" id="text" onkeyup="limiNum(this)"  placeholder="请输入投诉内容"></textarea>
    <p><span><strong id="num">0</strong>/16</span></p>
</div>

    JS代码:

 1   // 限制内容长度函数
 2   function limiNum(domEle) {
 3      //最大长度为16
 4     var maxLen = 16;
 5     var curtLen = domEle.value.length;
 6     if ( curtLen > maxLen ) { //当长度大于16就截取字符串
 7         domEle.value = http://www.mamicode.com/domEle.value.substring(0, maxLen);
 8     }
 9     document.getElementById("num").innerHTML = domEle.value.length.toString();
10   }

     当你输入的字符串长度大于16时,字符串会被进行截。大致效果如图(1)。 但是此时输入的是纯英文或者是字符数字的混合,不是在中文输入法下的,我们来看看在中文输入法下会怎么样。图(2)

     技术分享  图(1)    。技术分享    图(2)  技术分享图(3)

 

 

 如图我输入“程序员”的拼音而并没有选择好,此时的长度就已经是11,在控制台也输出了“chengxuyuan”图(3),这样导致的问题是如果我已经输好了长度为15的字符串,还要输入一个中文时,会被在用户输入达到边界值时,莫名其妙地将用户的输入截断,导致中文输入无法接续。假如我想接着输入中文“坐”字,先按了字母“z”,输入字符长度就变为16了,图(4),  控制台的判断如图:图(5)

     技术分享  图(4)               技术分享 图(5)

因此我们再按字母“u”,就必定会被截断,达不到预想的效果,这对于用于体验是不好的。所以需要进行改进。

  compositionstart,compositionend

    采用compositionstart、compositionend来捕获IME(input method editor)的启动和关闭事件.我使用chrome的版本是56.0.2924.87,亲测先触发compositionstart,接着触发compositionend,最后触发input,因此我在compositionend事件处理程序中也添加了截断字符串处理函数,就解决了上面产生的问题。

若我想输入“中”字,此时字母a-o已经有15个字符了,但“zhong”并不会被截断。图(6)(7)

        技术分享 图(6)        技术分享   图(7)

    此时输入完成如图,完美解决了中文输入法截断的问题。改进代码如下:

 1 var node = $("#text").get(0);
 2 var cpLock = false;
 3 node.addEventListener(‘compositionstart‘, function(){
 4      cpLock = true;
 5      console.log(‘中文输入开始‘);
 6 })
 7 node.addEventListener(‘compositionend‘, function(){
 8     cpLock = false;
 9      console.log(‘中文输入结束‘);
10      calNum(this);
11 })
12 node.addEventListener(‘input‘, function(){
13     console.log("触发input");
14     calNum(this);
15 });
16 //字符串截断函数            
17 function calNum(domEle) {
18     if(!cpLock) { 
19         var maxLen = 16;
20         var curtLen = domEle.value.length;
21         console.log(‘当前输入‘ + domEle.value);
22         if ( curtLen > maxLen ) {
23           domEle.value = http://www.mamicode.com/domEle.value.substring(0, maxLen);
24         }                                                 
25     document.getElementById("num").innerHTML = domEle.value.length.toString(); 26 } 27 }

  感兴趣的可以亲自测试下,效果很是很好的,童叟无欺哦。

 

 

 

 

  

 

输入框文本输入限制问题以及中文输入法下字符阶段的处理