您的位置:首页> 实例代码> JS实例

文本框限制输入字数效果

2018-3-23 19:20| 作者: admin| 查看: 1481| 评论: 0|来自: 蚂蚁部落

很多网站有类似功能更,可以限制在文本框内输入文字的数量,有些让文字不超过多少字,有些文字不能少于多少字,原理基本一样,下面介绍一下如何利用JavaScript实现此功能。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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()函数功能介绍如下:

[JavaScript] 纯文本查看 复制代码
var str=textarea.value;

获取文本框内的输入值,同时计算出来输入值的长度。下面的if语句用来判断当前输入文本的长度是否超过了指定的限制长度,如果超过会弹出一个警告框,并且通过substr()将超出的部分截取掉。

(3).window.onload=function(){...}的作用是当文档加载完成后才可以执行函数体内的代码,否则,由于代码是顺序执行,会导致document.getElementById("mytext")无法获取对象。然后为文本框的onkeyup事件绑定事件处理函数。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部