文本框如何实现限制输入字数效果
文本框如何实现限制输入字数效果
文本框如何实现限制输入字数效果:在很多网站都有这样的功能，那就是可以限制在文本框内输入文字的数量，有的是让文字不超过多少字，有的是文字不能少于多少字，原理基本是一样的，下面就介绍一下如何是用JS实现此功能，代码实例如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><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>
以上代码实现了限制文字输入数量功能，并且可以将文本框内输入的文本截取至指定的数量。简单介绍一下实现过程:一.功能的实现的核心是checkMax()函数，此函数具有两个参数，一个参数是要限制输入文本数量的对象，一个是要限制的数量。二checkMax()函数体内功能介绍如下:var str=textarea.value;获取文本框内的输入值，同时计算出来输入值的长度。下面的if语句用来判断当前输入文本的长度是否超过了指定的限制长度，如果超过会弹出一个警告框，并且通过substr()将超出的部分截取掉。三.window.onload=function(){...}的作用是当文档加载完成后才可以执行函数体内的代码，否则，由于代码是顺序执行，会导致document.getElementById("mytext")无法获取对象。然后为文本框的onkeyup事件绑定事件处理函数。
原文地址:http://www.51texiao.cn/Javascriptjiaocheng/2015/0405/123.html