实时监控文本框输入字数的实例代码,文本框实

作者:分分快三计划

分分快三计划 1

oninput的局限:普通话输入法带来的难点

下边包车型客车施工方案对于日常的公文输入,如印度语印尼语字母、数字等的输入是ok的。但当客户通过普通话输入法(举例QQ拼音)时,就能够遇上有的标题,大家简要改下上边的代码,看看见底会有啥样难题。就增加了个log打字与印刷。

    $('#text').on('input', function() {
        var value = $(this).val();
        console.log('当前输入:' value);  // 打印当前输入的值
        if(Str.byteLen(value, 3)>24){
            $(this).val(Str.getMaxlen(value, 24));
        }
    });

 

实时监察文本框输入字数的实例代码,文本框实例

供给:实时监察文件输入框的篇幅,并加以限定

分分快三计划 2

1、实时监督当前输入字数,直接动用onkeyup事件措施,给输入框加maxlength属性限制长度。如:

<div>
  <textarea id="txt" maxlength="10"></textarea>
  <p>0/10</p>
 </div>

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 txt.addEventListener("keyup", function(){
  txtNum.textContent = txt.value.length;
 })

此刻已足以做到主题的监察成效,存在的标题:当输入泰语时平常,但输入汉语时,监察和控制的数字会随拼音长度而退换。

2、消除办法:

compositionstart 事件触发于一段文字的输入此前(类似于 keydown 事件,但是该事件仅在若干凸现字符的输入在此之前,而那几个可以预知字符的输入只怕必要一类别的键盘操作、语音识别或许点击输入法的备选词)。

compositionend 便是呼应的就是一段文字输入的事件。

那五个属性有一点点类似于“按钮”,如:最初打开中文输入的拼音时按钮展开,不在更换监测获得的尺寸数值,完整输入贰个也许一串文字后,按钮关闭,得到监测的数值长度。

var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 var sw = false;  //定义关闭的开关
 txt.addEventListener("keyup", function(){
  if(sw == false){
   countTxt();
  }
 });
 txt.addEventListener("compositionstart", function(){
  sw = true;
 });
 txt.addEventListener("compositionend", function(){
  sw = false;
  countTxt();
 });
 function countTxt(){  //计数函数
  if(sw == false){  //只有开关关闭时,才赋值
   txtNum.textContent = txt.value.length;
  }
 }

在vue中的写法:

template:

<textarea name="suggestions-text" id="textarea" cols="30" rows="10" maxlength="300" v-on:keyup="write()" v-on:compositionstart="importStart()" v-on:compositionend="importEnd()" v-model="textContent"></textarea>
<p class="counterNum">{{conterNum}}/300</p>

data:

textContent: '',
conterNum: 0,
chnIpt: false,

methods:

write() {
 let self = this;
 if (self.chnIpt == false) {
  self.conterNum = self.textContent.length;
 }
},
importStart() {
 this.chnIpt = true;
},
importEnd() {
 this.chnIpt = false;
 this.write();
}

上述那篇实时监察文本框输入字数的实例代码便是小编共享给大家的全部内容了,希望能给我们三个参考,也期望大家多多点拨帮客之家。

须要:实时监督文件输入框的篇幅,并加以限定 1、实时监察当前输入字数,直接运用...

 tips:
  为何选取延时器?
  因为选词截止的时候input会比compositionend先一步触发,此时flag还未调治为true,所以无法触发到console,故用setTimeout将其优先级滞后。

未完的探究

正如本文最前面强调的,本文的用例都以在chrome特定版本下进展测验,鲜明compositionstart、compositionend实际不是二个金童玉女全部浏览器的方案。包蕴jQuery的“input”事件都以此中做了一批宽容性管理的。倘使那一个需要是要合营全体主流浏览器的话就真跪了,纵然那几个迟早有一天会形成粗暴的具体。

于是啊,探寻还将持续:是还是不是有合作全部主流浏览器的方案,求路过的兄弟们支招。

 

正文代码示例参见附属类小部件

分分快三计划 3

消除思路一:compositionstart、compositionend

在万能的天真烂漫园群里抛出难题后,有个兄弟提议了个方案:能够使用compositionstart、compositionend来捕获IME(input method editor)的起步和停业事件。说真话,这两风云史上从未有过,但既然有那般个缓和方案,权且试一下,再次修改代码

$('#text').on('input', function() {
    if($(this).prop('comStart')) return;    // 中文输入过程中不截断

    var value = $(this).val();
    console.log('当前输入:' value);
    if(Str.byteLen(value, 3)>24){
        $(this).val(Str.getMaxlen(value, 24));
    }
}).on('compositionstart', function(){
    $(this).prop('comStart', true);
    console.log('中文输入:开始');
}).on('compositionend', function(){
    $(this).prop('comStart', false);
    console.log('中文输入:结束');
});

 

输入进程截图如下,能够见见,当compositionstart事件触发,就停止对输入字符的截断操作,而是耐心等待客商输入的终结

分分快三计划 4

按下空格键,汉语输入实现,此时再去进行字符长度的判读和截断

分分快三计划 5

 

 

碰着那样个供给,允许客商修改自身的片子,名片最大尺寸扶助8个汉字(贰十一个字节),当客户输入超越8个字节,则不容许客商继续输入。

分分快三计划 6

下边是输入进程中的截图。能够看看,客商接孟菲斯南语输入法输入的进程中,“input”事件被无休止地接触着,那会带来怎么着难点啊?相信你已经想到了——会招致程序对当下顾客输入字符实际尺寸的误判。举例顾客输入“技术员”四个壮汉,实际占用9个字节,但对上面包车型客车次序来讲,取到的字节数为"chengxuyuan".length

11。在顾客输入到达边界值时,就能够不可捉摸地将顾客的输入截断,导致普通话输入不能持续(感兴趣的同学能够协和节和测验下)

分分快三计划 7

 

由此查阅资料得到消息在输入中文(包涵语音识别时)会前后相继触发compositionstart、compositionend事件,类似于keydown和keyup的三结合。

中期的笔触:oninput你好

很广泛的须要,认为非常熟谙,监听input事件,当输入内容产生变化的时候,获得客户输入内容,并拓宽截断操作(借使抢先的话)。首要代码如下。一切显示那么美好,直到中文输入法出现。

ps:本文用例均在 chrome 版本 33.0.1750.146下测量检验

$('#text').on('input', function() {
    var value = $(this).val();
    if(Str.byteLen(value, 3)>24){
        $(this).val(Str.getMaxlen(value, 24));
    }
});

一体化代码如下,有乐趣能够看下:

分分快三计划 8分分快三计划 9

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>

</head>
<body>
    <input id="text" placeHolder="最大支持24个字节" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
     var Str = {
         byteLen : function (str, len){
            //正则取到中文的个数,然后len*count 原来的长度。不用replace
            var factor = len || 2;
            str  = '';
            var tmp = str.match(/[^x00-xff]/g) || [];

            var count = tmp.length;
            return str.length   (factor-1)*count;
        },
        getMaxlen : function(str,maxlen){
            var sResult = '', L=0, i=0, stop = false, sChar;
            if(str.replace(/[^x00-xff]/g,'xxx').length <= maxlen){
                return str;
            }
            while(!stop){
                sChar = str.charAt(i);
                //sResult =sChar;
                L = sChar.match(/[^x00-xff]/) !== null ? 3 : 1;

                if(L > maxlen){
                    stop = true;
                }else{
                    sResult =sChar;
                    i  ;
                }
            }
            return sResult;
        }
    };
    $('#text').on('input', function() {
        var value = $(this).val();
        if(Str.byteLen(value, 3)>24){
            $(this).val(Str.getMaxlen(value, 24));
        }
    });
    </script>
</body>
</html>

完全代码

思路: 注脚一(Wissu)个标记flag,在compositionstart、compositionend五个事件进度里面包车型大巴时候flag值为false,在input事件中经过flag的值来判别当前输入的事态。

不过在广大情状下,只供给输入到输入框的中文字符。

 

接触如下:

先看看 compositionstart 的描述 和 compositionend 的 描述

compositionstart 事件触发于一段文字的输入在此以前(类似于 keydown 事件,不过该事件仅在若干凸现字符的输入在此之前,而那个可知字符的输入或者要求一系列的键盘操作、语音识别只怕点击输入法的备选词)。

即每按下八个拼音字符,都会触发input事件,选拔汉语也会触发input事件,不过在剔除输入框内普通话的时候不会触发compositionend 事件,所以博得输入框内容照旧要放置input事件里。

compositionend  当文本段落的团队曾经完毕或撤废时,会触发该事件。

参考:

 

    var flag = true;
       $('#input').on({
            compositionstart:function(){flag = false;},
            compositionend:function(){flag = true;},
            input:function(){
                var _this = this;
                setTimeout(function(){
                    if(flag){
                        console.log($(_this).val());
                    }
                },0);
            }
        });

分分快三计划 10

触发compositionstart时,文本框会填入 “虚构文本”(待确认文件),同时触发input事件;在触发compositionend时,即是填写实际内容后(已认可文件)。

监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未有实际填充到文本框中(选词)时会触发input事件,如图:

消除办法:

 分分快三计划 11

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 经验总结 字符串截断