文本框限制输入字数效果
分类：实例代码
文本框限制输入字数效果属于前端实例代码，有关更多实例代码大家可以查看。
很多网站有类似功能更，可以限制在文本框内输入文字的数量，有些让文字不超过多少字，有些文字不能少于多少字，原理基本一样，下面介绍一下如何利用JavaScript实现此功能。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script type="text/javascript">
window.onload=function(){
var textarea=document.getElementById("mytext");
textarea.onkeyup=function() {
checkMax(textarea,10);
}
}
function checkMax(textarea,maxLength){
var str=textarea.value;
var strlen=str.length;
if(strlen>maxLength){
alert('字数超过限制');
eval(textarea.value=str.substr(0,maxLength));
}
}
</script>
</head>
<body style="text-align:center">
<h1>请在文本框内输入文本测试功能</h1>
<textarea name="textfield" cols="60" rows="10" id="mytext"></textarea>
</body>
</html>
以上代码实现了限制文字输入数量功能，并且可以将文本框内输入的文本截取至指定的数量。
实现过程：
（1）.核心是checkMax()函数，具有两个参数，一个是要限制输入文本数量的对象，一个是要限制的数量。
（2）.checkMax()函数功能介绍如下：
var str=textarea.value;
获取文本框内的输入值，同时计算出来输入值的长度。下面的if语句用来判断当前输入文本的长度是否超过了指定的限制长度，如果超过会弹出一个警告框，并且通过substr()将超出的部分截取掉。
（3）.window.onload=function(){...}的作用是当文档加载完成后才可以执行函数体内的代码，否则，由于代码是顺序执行，会导致document.getElementById("mytext")无法获取对象。然后为文本框的onkeyup事件绑定事件处理函数。
文本框限制输入字数效果，这样的场景在实际项目中还是用的比较多的，关于文本框限制输入字数效果就介绍到这了。