js对输入框的字数限制(2009年7月4日更新)

时间：2009年07月02日作者：愚人码头查看次数:7,345 views评论次数：6

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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var textCounter=function (field,counter,maxlimit){
var charcnt = field.value.length;
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}else {
document.getElementById(counter).innerHTML=charcnt;
}
}
</script>
</head>
<body>
<p><span id="progressbar1">0</span>/12</p>
<form><input type="text" id="maxcharfield"  size="34"/>
</form>
<script type="text/javascript">
document.getElementById("maxcharfield").onfocus = document.getElementById("maxcharfield").onkeydown = document.getElementById("maxcharfield").onkeyup = function(){
textCounter(this,'progressbar1',12);
}
</script>
</body>
</html>

—————————2009年7月4日更新——————————-

哈哈，被拍砖了，谢谢笨活儿的留言和给的方法，我照这重新做了一个：


< !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>无标题文档</title>
</head>
<body>
<p><span id="progressbar1">0</span>/12</p>
<form><input type="text" id="maxcharfield" maxlength="12"/>
</form>
<script type="text/javascript">
document.getElementById("maxcharfield").onfocus = document.getElementById("maxcharfield").onkeydown = document.getElementById("maxcharfield").onkeyup = function(){
document.getElementById("progressbar1").innerHTML = this.value.length;
}
</script>
</body>
</html>

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《js对输入框的字数限制(2009年7月4日更新)》

如果你读了我的文章，觉得有帮助：

说明

分类：JS

4条评论

笨活儿留言于:2009年07月04日14:21

额。。。有必要么？input直接有maxlength属性吧？如果要counter，在旁边再设就是

[回复]
trace332留言于:2009年07月08日14:25

个人感觉的maxlength已经足够用了，不过textarea无此属性，再用JS来控制就好。

还有一个问题就是，如果很不幸你使用的是五笔输入法，那么这段JS无效，好似五笔不触发keyup,keydown(-_-!!)

[回复]
我自己写了个jQuery写法留言于:2011年02月14日10:40

我就是用五笔的.呵呵

[回复]
强记留言于:2011年05月31日13:35

鼠标复制就会失效啦，是否focus加个定时器比较好，blur取消

[回复]