欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 网站定制

织梦模板

当前位置:织梦模板 > 技术文档 > 程序代码 > 利用JS实现对输入文字个数限制的方法
这篇文章主要为大家详细介绍了利用JS实现对输入文字个数限制的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

发表留言或者微博的时候,对输入文字个数的限制,下面分两种情况,每种分别介绍两种实现方式:

利用JS实现对输入文字个数限制的方法

第一种:一个汉字算一位,两个字母或符号算一位

通过ASCII编码来判断

textarea.onkeyup = function(){
        //[^\x00-\xff]即ASCII编码不在0-255的字符,也就是汉子了,先把所有汉子换成任意两个字符,最后除以2,得到一个字符
        var n = 150- Math.floor(this.value.replace(/[^\x00-\xff]/g,"aa").length/2)
        span.innerHTML = n <=0 ? 0 : n;
};

通过charCodeAt编码来判断

//键盘up的时候判断
textarea.onkeyup = function(){
        var n = 1 ; //字母或符号累加判断
        var num = 0; //总个数累加判断
        for (var i = 0; i < this.value.length; i++) {
                //根据charCodeAt来判断输入的是中文还是字母,符号
                charCode = this.value.charCodeAt(i);
                if (charCode >= 0 && charCode <= 128){
                        //通过n模2来判断输入两次累加
                        n++;
                        if(n%2 == 0) num += 1;
                }else{
                        num += 1;
                }
        };
        span.innerHTML = 150-num <=0 ? 0 : 150-num;
};

另一种:是一个汉字算两位,一个字母或者符号算一位

通过ASCII编码来判断

textarea.onkeyup = function(){
        //[^\x00-\xff]即ASCII编码不在0-255的字符,也就是汉子了,先把所有汉子换成任意两个字符
        var n = 150- this.value.replace(/[^\x00-\xff]/g,"aa").length
        span.innerHTML = n <=0 ? 0 : n;
};

通过charCodeAt编码来判断

//键盘up的时候判断
textarea.onkeyup = function(){
        var num = 0; //总个数累加判断
        for (var i = 0; i < this.value.length; i++) {
                //根据charCodeAt来判断输入的是中文还是字母,符号
                charCode = this.value.charCodeAt(i);
                if (charCode >= 0 && charCode <= 128){
                        //字符就+1
                        num += 1;
                }else{
                        //汉子就+2
                        num += 2;
                }
        };
        span.innerHTML = 150-num <=0 ? 0 : 150-num;
};
以上就是利用JS实现对输入文字个数限制的方法的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签:

上一篇js实现弹窗一个ip在24小时只弹出一次的代码

下一篇用JS控制页面等比例缩小的实现方法

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在