由于需要用到限制输入框的字数
然后就到网上找了一段代码，可以用，但是发现有问题，不能输入超过限制的字符，这样就不能忍了。
拼音输入法的时候字还没打完就被限制了。
于是我就改良了一下，注释的是原代码，没注释的是我改良后的代码。
<html lang='en'> <head> <meta charset='utf-8'/> <title>demo</title> <style type="text/css"> .sr { width: 300px; height: 300px; padding: 10px; outline: none; border: 1px solid #D4D4D4; background-color: #F3F3F3; } </style> </head> <body> <!-- onkeyUp="textLimitCheck(this, 20);" --> <textarea name="sca" class="sr" cols=45 rows=10 id="praiseName"></textarea> <br> <font color=#666666>限 6 个字符 已输入 <font color="#CC0000"><span id="info_limit">0</span></font> 个字</font> <script> /* function textLimitCheck(thisArea, maxLength){ if (thisArea.value.length > maxLength){ alert(maxLength + ' 个字限制. \r超出的将自动去除.'); thisArea.value = thisArea.value.substring(0, 20); thisArea.focus(); } /*回写span的值，当前填写文字的数量*/ /*messageCount.innerText = thisArea.value.length; }*/ //控制字数 var lim = new limit(); lim.txtNote = document.getElementById("praiseName"); lim.txtLimit = document.getElementById("info_limit"); lim.limitCount = 6; lim.init(); function limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 this.init = function(){ txtNote = this.txtNote; txtLimit = this.txtLimit; limitCount = this.limitCount; txtNote.maxLength = limitCount; txtNote.onkeydown = function(){txtLimit.innerText = txtNote.value.length;}; txtNote.onkeyup = function(){txtLimit.innerText = txtNote.value.length;}; } } </script> </body> </html>
/**
* 2017/6/17 更新
**/
用的时候发现一个BUG，就是输入法输入的时候，显示超出设置字数时进行截屏或者其他操作，操作完后，不会自动截取文字。所以来修补一下。
//---------------------------------------方法一------------------------------------------
在dom上加onblur事件，输入框失去焦点时再截取一次。
<textarea name="sca" class="sr" cols=45 rows=10 id="praiseName" onblur="onsubstring();"></textarea>
function onsubstring(){ var txtNote = document.getElementById("praiseName"); var txtLimit = document.getElementById("info_limit"); var limitCount = 6; if (txtNote.value.length > limitCount) { var text = txtNote.value.substring(0, limitCount); txtNote.value = text; txtLimit.innerText = limitCount; }; };
//---------------------------------------方法二------------------------------------------ 还有一个jquery解决办法，同样的解决方式只是代码是jquery
$('#praiseName').blur(function() { $this = $(this); var val = $this.val(); var length = $this.val().length; var lengthNum = 30;//设置限制的字数 //超过指定字数便截取 if (length > lengthNum) { var text = $this.val().substring(0, lengthNum); $this.val(text); $('#info_limit').text(lengthNum); }; });
/*
* 2017/6/28 更新
*/
由于需要验证去除空格，我用到了jquery的 $.trim() 方法，去除输入的文字前后空格，基本满足要求。
$('#praiseName').blur(function() { $this = $(this); var val = $.trim($this.val()); $this.val(val);//去除空格后，重新赋值 var length = $this.val().length; var lengthNum = 8;//设置限制的字数 //超过指定字数便截取 if (length > lengthNum) { var text = $this.val().substring(0, lengthNum); $this.val(text); $('#info_limit').text(lengthNum); }else{ $('#info_limit').text(length); }; });
多次使用：
$("#XX").blur(function(){ blurLength($(this), 20, $('#XX')); }); $("#XX").blur(function(){ blurLength($(this), 90, $('#XX')); }); //验证输入框字符串 function blurLength(t, n, l){ var val = $.trim($(t).val()); $(t).val(val);//去除空格后，重新赋值 var length = $(t).val().length; var lengthNum = n;//设置限制的字数 //超过指定字数便截取 if (length > lengthNum) { var text = $(t).val().substring(0, lengthNum); $(t).val(text); $(l).text(lengthNum); }else{ $(l).text(length); }; }
/*
* 2017/10/11 更新
*/
新的需求，需要在输入时判断只能输入数字和小数点。并且小数点后只保留两位
var lims = new limit(); lims.txtNote = document.getElementById("diningPrice"); lims.txtLimit = document.getElementById("diningPriceNum"); lims.limitCount = 5; lims.mark = 1; lims.init(); function limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 var mark;//判断标识 this.init = function(){ txtNote = this.txtNote; txtLimit = this.txtLimit; limitCount = this.limitCount; mark = this.mark; txtNote.maxLength = limitCount; txtNote.onkeydown = function(){ if (mark == 1) { clearNoNum(txtNote); } txtLimit.innerText = txtNote.value.length; }; txtNote.onkeyup = function(){ if (mark == 1) { clearNoNum(txtNote); } txtLimit.innerText = txtNote.value.length; }; } } //过滤除数字和点外的其他输入内容 function clearNoNum(obj){ obj.value = obj.value.replace(/[^\d.]/g,""); //清除“数字”和“.”以外的字符 obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的 obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数 if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 obj.value= parseFloat(obj.value); } }
限制只能输入中文、英文和数字
function limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 this.init = function(){ txtNote = this.txtNote; txtLimit = this.txtLimit; limitCount = this.limitCount; txtNote.maxLength = limitCount; txtNote.onkeydown = function(){ txtNote.value = txtNote.value.replace(/[^\u4E00-\u9FA5A-Za-z0-9]/g,''); txtLimit.innerText = txtNote.value.length; }; txtNote.onkeyup = function(){ txtNote.value = txtNote.value.replace(/[^\u4E00-\u9FA5A-Za-z0-9]/g,''); txtLimit.innerText = txtNote.value.length; }; } }
新手提示：如果用jquery方法，需要导入jquery文件，dom上也不用加onblur事件。
如果发现导入后还是没用，就把js文件放到页面最后、</body>前面，并且jquery文件在最前面的一个。
