JS限制Textarea文本域字符个数程序
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 在js中限制用户输入数字时我们核心代码就是在testarea中加onKeyDown事件，然后写一个字符判断函数，判断field.value.length是不是大于我们设置的字符长度了，如果是的我们就substring截断。...
| 代码如下 |
复制代码 |
|
<head>
<title>JS限制Textarea文本域字符个数</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<SCRIPT LANGUAGE="JavaScript">
<!--//
function textCounter(field, countfield, maxlimit) {
// 函数，3个参数，表单名字，表单域元素名，限制字符；
if (field.value.length > maxlimit)
//如果元素区字符数大于最大字符数，按照最大字符数截断；
fieldfield.value = field.value.substring(0, maxlimit);
else
//在记数区文本框内显示剩余的字符数；
countfield.value = maxlimit - field.value.length;
}
-->
</SCRIPT>
</head>
<body>
<form name=myform action="">
<textarea name="message" cols="28" rows="5" onKeyDown="textCounter(message,remLen,6);" onKeyUp=
"textCounter(message,remLen,6);"></textarea>
您还可以输入:<input name="remLen" type="text" value="6" size="5" readonly="readonly">个字符
</form>
</body>
</html>
|
再来一个jquery的实例
| 代码如下 |
复制代码 |
|
<!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=utf-8" />
<title>jquery限制输入字数,并提示剩余字数</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function words_deal()
{
var curLength=$("#TextArea1").val().length;
if(curLength>5)
{
var num=$("#TextArea1").val().substr(0,5);
$("#TextArea1").val(num);
alert("超过字数限制，多出的字将被截断！" );
}
else
{
$("#textCount").text(5-$("#TextArea1").val().length);
}
}
</script>
</head>
<body>
剩余<span id="textCount">5</span>个字<br />
<textarea name="textarea" id="TextArea1" cols="45" rows="5" onkeyup="words_deal();" ></textarea>
</body>
</html>
|
|
