H5的输入框在iOS下的文字计算方式

面对一个在表单输入的过程中计算文字长度或者个数的时候,往往会这一个问题,在iOS系统或者Mac中,输入法文字智能提示,会被认为是已输入文本的内容,这样使得在限制输入个数或者计算个数的时候有误差,因为初发现大部分是在iOS等系统才会出现的问题,所以初步的解决方案是使用:compositionstart、compositionend...

上面说到的事件其实就是所谓的合成事件,是在DOM3级中新增的,我们主要用来处理 IME 的输入序列,也就是输入法编辑器,可以让用户输入在物理键盘上找不到的字符。compositionstart、compositionupdate、compositionend 三种事件分别指的的是:要开始输入、插入新字符、系统关闭并返回正常键盘输入状态,对应取得的文本就是字符。

        let isEditor = false;
        $('#input_name').on('input', function(e) {

              let input = e.currentTarget;
              let $reminder = $(input).closest('.reminder');
              if(input.value.replace(/ /g,"").replace(/[^\x00-\xff]/g,"**").length > 40){
                     // 输入过程中不截断 
                     if (!isEditor) {
                         $reminder.show();
                     }
               } else {
                      $reminder.hide();
               }
                $reminder = null;
        }).on('compositionstart', function() {
            isEditor = true;
            console.log('开始输入');
        })
        .on('compositionend', function() {
            isEditor = false;
            console.log('输入结束');
        });

你可能感兴趣的:(H5的输入框在iOS下的文字计算方式)