zoukankan      html  css  js  c++  java
  • 用js实现在文本框中检测字数和限制字数功能

    方法一:在文本框能区分并限制中文英字数功能
    首先,既然要限制字数,肯定要想办法实时获取用户在文本框里输入的文字的数量。input控件有个length的属性,可以方便地获取字数。可是,它所返回的字数无论是中文还是英文或者数字,1个字就算1个字。客户要限制字数的原因是为了页面显示的时候排版不会乱,因此一个汉字需要按2个英文字符来计算。这样的话,这个默认的length失效了。
    怎么区分中文和英文呢?string对象有一个叫charCodeAt(index)的方法,可以获取字符串中某一个字符的编码。因为字母数字的ascii编码都小于255而汉字的编码肯定大于255,因此我们可以使用此方法来判断字符串占用多少英文字符的宽度。

    效果如下图:

     

    代码: 

    $('.titleArea').keyup(function () {
    	var hidTitleWordNum = parseInt($('.hidTitleWordNum').val());
    	var titleAreaVal = $('.titleArea').val();
    
    	var sum = 0;
    	for (var i = 0; i < titleAreaVal.length; i++) {
    		if ((titleAreaVal.charCodeAt(i) >= 0) && (titleAreaVal.charCodeAt(i) <= 255)) {
    			sum = sum + 1;
    		} else {
    			sum = sum + 2;
    		}
    		if (sum > hidTitleWordNum) {
    			alert("输入数据超长!不能再输入数据。");
    			var str = titleAreaVal.substring(0, i);
    			$('.titleArea').val(str);
    			$('.titleWordNum').text(hidTitleWordNum - getLength($('.titleArea').val()));
    			break;
    		} else {
    			$('.titleWordNum').text(hidTitleWordNum - getLength($('.titleArea').val()));
    		}
    	}
    });


     

  • 相关阅读:
    Python numpy.transpose 详解
    如何理解张量tensor
    tensorflow中张量的理解
    Theano入门——CIFAR-10和CIFAR-100数据集
    阻止form表单提交的问题
    webp图片优化
    Css控制网页变灰
    express-session相关用法
    REM+SVG Sprite,web app案例
    HTML 5 Audio/Video DOM canplaythrough 事件在移动端遇到的坑
  • 原文地址:https://www.cnblogs.com/jackljf/p/3589323.html
Copyright © 2011-2022 走看看