文本域输入字数限制

<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
function checklen(obj){
var lenE = obj.value.length;
var lenC = 0;
var CJK = obj.value.match(/[\u4E00-\u9FA5\uF900-\uFA2D]/g);
if (CJK != null) lenC += CJK.length;
tno.innerText = obj.maxlength - lenC - lenE ;
if (tno.innerText < 0) {
var tmp = 0
var cut = obj.value.substring(0, obj.maxlength);
for (var i=0; i<cut.length; i++){
tmp += /[\u4E00-\u9FA5\uF900-\uFA2D]/.test(cut.charAt(i)) ? 2 : 1;
if (tmp > obj.maxlength) break;
}
obj.value = cut.substring(0, i);
}
}
</script>

<body>
<textarea name="s1" rows="5" cols="50" maxlength="11" onpropertychange="checklen(this)"></textarea>
<br>共可输入10字符,还剩 <span id="tno"></span>个字符
</body>
</html>

方法一:当输入汉字时:一个汉字将会占两个字节

 

方法2

js方法:

function checkLength(which)
  {
   var maxChars = 250;
   if (which.value.length > maxChars)
   which.value = which.value.substring(0,maxChars);
   var curr = maxChars - which.value.length;
   document.getElementById("chLeft").innerHTML = curr.toString();
  }

 

html关键代码:

   <p>描述:<textarea rows="5" id="kuanshimiaoshu" cols="55" onkeyup="checkLength(this);" name="bean.remark">${ringcom.remark}</textarea>
          <span>还能输入<i style="color:red;font-style:normal;" id="chLeft">250</i>字</span></p><br/>

 

方法二: 不管汉字还是英文都是占一个字节、、 是限制字数方法的首选、

 

方法三:用jquery方法实现限制字数输入

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新浪微博输入字数统计jquery代码特效 - 懒人建站</title>

</head>

<body>
<h1>新浪微博输入字数统计jquery代码特效</h1>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
var text=$("#edit_myfrom textarea").val();
var counter=text.length;
$("#numtj var").text(110-counter);
$(document).keyup(function() {
var text=$("#edit_myfrom textarea").val();
var counter=text.length;
$("#numtj var").text(110-counter);
});
});
</script>
<div id="edit_myfrom" class="editbox">
<form action="" method="post" class="form">
<p id="numtj">你还可以输入<var style="color:#C00">--</var>个字符。</p>
<p class="textinput"><label><textarea name="" cols="" rows="" maxlength="110" style="height:60px; width:400px">在这里面输入文字试试</textarea></label></p>
</form>
</div>
</boby>
</html>

posted on 2012-10-16 09:19  juan1206  阅读(806)  评论(0编辑  收藏  举报

导航