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

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

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

  使用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 = 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 = domEle.value.substring(0, maxLen);
24         }                                                 25     document.getElementById("num").innerHTML = domEle.value.length.toString();
26     }
27 }            

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

 

时间: 2024-09-29 16:25:23

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

移动APP 中文输入法下的搜索优化

最近做了一个移动端的搜索功能,带有suggest.实现上并没有什么可说的,但是在后续优化上,特别是在中文输入法的情况下的优化使我学到一些新东西,所以决定写一篇文章. 下面是我简化后的基本功能实现,监听输入框的input事件,当搜索框有输入时,根据输入内容和后端进行交互提供suggest,再监听keyup的事件,当用户敲击回车的时候,就进行一次搜索.注意其中suggest和search是两个自定义事件,并非原生事件.我们在实际生产环境里应该给自定义事件加上特殊前缀. $('#searchInput

移动端、手机网站中文输入法下keyup事件部分按键无效

微信公众平台开发时,客户提需求"输入框中输入内容时,输入框后边显示清除按钮,清除输入框中的内容",使用"keyup"事件时在中文输入法下部分按键keyup事件无效, 以下为解决方案. 绑定"input"和"propertychange"事件可以解决,以下为代码: var bind_name="input";//定义所要绑定的事件名称 if(navigator.userAgent.indexOf("

JS 对输入判断变化屏蔽中文输入法连续输入时触发的事件

//智能搜索提示 IntelligenceSearch: function IntelligenceSearch() { $('#keyWord').on('input', function () { if ($(this).prop('comStart')) return; // 中文输入过程中不截断 var url = $('#hKeyWord').val(); var data = { keyword: $('#keyWord').val() }; $('#words').html('')

JS对输入判断变化屏蔽中文输入法输入时连续触发事件的方法

<input type="text" onfocus="filter_time()" value="xxx" id="wd"> <script> var str = ''; var now = '' function filter_time() { var time = setInterval(filter_staff_from_exist, 100); $(this).bind('blur', fun

科技的发展(1) - 中文输入法

关于科技的发展系列,我想谈谈的第一个话题便是中文输入法. 回想起二十年前,刚接触计算机时,第一个让人困扰的事便是学习五笔.那时还没有用户痛点的说法,可以熟练使用五笔输入法还是看起来颇为高大上的感觉.不能免俗,记忆里的我还是费了一些劲的,虽然最终也没有能够练就这门"上乘"武功.如今想来也只依稀记得"烟"字的五笔编码是old,还是靠这个编码的巧合. 于是乎,我有一个念头,当下是否还有人在使用五笔输入法?我查阅了一下百度指数:五笔输入法 vs 搜狗输入法. 可以看到五笔输

Ubuntu 14.04中文输入法的安装

Ubuntu默认自带的中文输入法是IBUS框架的ibus-pinyin,IBUS-Bopomofo等.对于习惯于搜狗,紫光华宇,谷歌拼音的我们可能有点使用不习惯.下面就是安装常用的IBUS中文输入法. 1,安装IBUS-googlepinyin,ibus-sunpinyin. 直接在Ubuntu软件中心搜索IBUS,然后选择显示不常用项,即如下找到相应的输入法. 如果除了系统自带的IBUS输入法框架,你还安装了Fcitx等输入法框架,那需要在系统设置→语言支持项目设定"键盘输入方式系统"

UITextField中文输入法输入时对字符长度的限制

如题的问题,又是个让我抓狂了大半天的问题,还是做个记录,有与类似问题的同学可参考,但不一定对.具体问题还需具体分析.我遇到的需求是这样的:有一个输入框,输入框内输入文字,文字字数限制在20字. 我采用了UITextField作为我的输入框控件,并且在委托方法: - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)s

iOS:UITextField中文输入法输入时对字符长度的限制

如题的问题,又是个让我抓狂了大半天的问题,还是做个记录,有与类似问题的同学可参考,但不一定对.具体问题还需具体分析.我遇到的需求是这样的:有一个输入框,输入框内输入文字,文字字数限制在20字. 我采用了UITextField作为我的输入框控件,并且在委托方法: - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)s

Bug - 文本框oninput事件,在中文输入法状态多次触发

在中文输入法状态中,还在检索拼音,这时事件就会触发,这不是我们想要的,xiaoqiu x,xi,xia,xiao....都会触发,这样频繁的请求会给接口造成挺大压力的. 我们可以使用js里面防抖动的方式或DOM3的复合事件来解决此问题. 回顾一下onchange和input事件: oninput事件在<input>或<textarea>元素的值发生改变时触发 onchange事件也是监听文本框变化后触发,不同的是oninput事件是立即(即时)触发,onchange则是在元素失去焦