win10自带输入法限制字数超出自动清空

790 阅读1分钟

最近开发遇到了一个很恶心的小问题,IE浏览器下面对于文本框限制字数超出截取时竟然给我自动清空了,并且只有在win10自带的输入法下才会有这种情况,超级恶心有么有?但是我还是给解决了。废话不说,直接上代码,分享给大家。

代码:

var len = 0;
$(document).on("keyup input", "textarea[name=quotationVal]", function(){
    len = Number( $(this).val().length );
    if(len > 300){
        document.getElementById("quotationVal").blur();
        $(this).val($(this).val().slice(0,300));
        len = $(this).val().length;
        setTimeout(function(){
            document.getElementById("quotationVal").focus();
        },500)
    }
    $(".wordsNumber").text(len);
});

展示效果:


解析:

  1. 写keyup 和 input  防止鼠标右键粘贴的时候输入框监听不到数据的变化,导致如图右下角不在计数
  2. 为了不防止清空先让其失去焦点,然后截取,但是如果用户想删除呢?岂不是找不到光标焦点,还要手动去点击一下输入框,所以设置一个定时器,让其感觉不到的情况下去获取焦点
  3. 为什么有一次的在判断中去获取字符串的长度,因为实践中发现右下角的计数会不能及时的更新变化,其实可以直接赋值300,但是有点low了。
总结:
      以上可以完美的解决这个看似小但是很恶心的问题,既可以实现功能,也可以是解决用户体验。分享给大家,希望可以帮助大家避免小坑带来的困扰