js 限制表单输入长度 汉字为两个字符

将该效果整合成了一个函数，此函数接受3个参数：
第一个为textarea或其他text表单的ID；
第二个为显示输入内容的ID，可留空；
第三个为最多输入的字符，一个汉字为2个字符。
这只是一个基础效果，欢迎同学们进行优化和改进。
要获取代码请查看demo的源文件

限制表单输入长度 汉字为两个字符

function lengthLimit(elem, showElem, max){
var elem = document.getElementById(elem);
var showElem = document.getElementById(showElem);
var max = max || 50;// 最大限度字符，汉字按两个字符计算
function getTextLength(str){// 获取字符串的长度 一个汉字为2个字符
return str.replace(/[^\x00-\xff]/g,"xx").length;
};
// 监听textarea的内容变化
if(/msie (\d+\.\d)/i.test(navigator.userAgent) == true) {// 区分IE
elem.onpropertychange = textChange;
}else{
elem.addEventListener("input", textChange, false);
}
function textChange(){// 内容变化时的处理
var text = elem.value;
var count = getTextLength(text);
if(count > max){// 文字超出截断
for(var i=0; i= max){
elem.value = text.substr(0, i);
if(showElem) showElem.innerHTML = elem.value;// 显示输出结果
break;
};
}
}else{
if(showElem) showElem.innerHTML = elem.value;// 显示输出结果
};
};
textChange();// 加载时先初始化
};

最多输入20个汉字

lengthLimit("commentText", "dsa", 40);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JS获取字符串实际长度(包含汉字)的简单方法

    方法一: var jmz = {}; jmz.GetLength = function(str) { ///<summary>获得字符串实际长度,中文2,英文1</summary> ///<param name="str">要获得长度的字符串</param> var realLength = 0, len = str.length, charCode = -1; for (var i = 0; i < len; i++) { cha

  • JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)

    js判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head> <title>js判断输入字符串长度(汉字算两个字符,字母数字算一个)</title> <style type="text/css"> .pbt { margin-bottom: 10px; } .ie6 .pbt .ftid a, .ie

  • js 限制表单输入长度 汉字为两个字符

    将该效果整合成了一个函数,此函数接受3个参数: 第一个为textarea或其他text表单的ID: 第二个为显示输入内容的ID,可留空: 第三个为最多输入的字符,一个汉字为2个字符. 这只是一个基础效果,欢迎同学们进行优化和改进. 要获取代码请查看demo的源文件 限制表单输入长度 汉字为两个字符 function lengthLimit(elem, showElem, max){ var elem = document.getElementById(elem); var showElem =

  • js限制文本框输入长度两种限制方式(长度、字节数)

    功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js 复制代码 代码如下: function limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 var isbyte;//是否使用字节长度限制(1汉字=2字符) var txtlength;//到达限制时,字符串的长度 var

  • JS判断表单输入是否为空(示例代码)

    复制代码 代码如下: //去掉输入字符串两边的空格 function trim(s) {      var count = s.length;      var st    = 0;       // start      var end   = count-1; // end if (s == "") return s;      while (st < count) {        if (s.charAt(st) == " ")          st

  • 详解Yii2 定制表单输入字段的标签和样式

    Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField, 要生成一个具有label.input.error提示这样通用格式的登录框,可编写如下代码: <?php $form = ActiveForm::begin([ 'id' => 'login-form', 'options' => ['class' => 'form-horizontal'], 'fieldConfig' => [ 'template' => "{label}\n

  • js字符限制(字符截取) 一个中文汉字算两个字符

    html <input type="text" id="txt"> 核心js代码 //字符串截取 function getByteVal(val, max) { var returnValue = ''; var byteValLen = 0; for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; els

  • 原生js实现表单的正则验证（验证通过后才可提交）

    原生js实现表单的正则验证（验证通过后才可提交）

    实现了如下功能: 1.用户名:onfouc显示msg规则:onkeyup计算字符,其中中文为两个字符:onblur,验证是否通过 2.邮箱:onblur 正则匹配,正则是根据自己的需求写的,可以根据个人需求更改 3..密码:onkeyup时显示密码的强弱度,onblur时验证密码,是否为相同字符,是否全字符,或全数字,长度是否符合要求 4.确认密码:验证是否和上一次一致 5.提交按钮只有在全部input验证通过后才有效,否则无效 主要知识点: 1.中文为两个字符: function getLen

  • php用户注册页面利用js进行表单验证具体实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">     <head>         <meta ht

  • 使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)

    在网站开发中,经常会简单使用js代码来判断字符串中有多少汉字的功能.今天小编抽时间给大家分享实现代码.废话不多说了,直接给大家贴代码了. $("form").submit(function () { var content = editor.getContentTxt(); var sum = 0; re = /[\u4E00-\u9FA5]/g; //测试中文字符的正则 if (content) { if (re.test(content)) //使用正则判断是否存在中文 { if

  • 当达到输入长度时表单自动切换焦点

    当达到输入长度时表单自动切换焦点

    有时候会遇到和上面类似的表单字段.我们可以给每个字段限制输入长度,当达到输入长度时自动切换焦点,以增强表单的易用性 复制代码 代码如下: <form id="myForm"> <input type="text" name="tel1" id="txt1" maxlength="3">- <input type="text" name="tel2&

随机推荐