用字符串的length实现限制文本框长度

本文介绍如是使用JavaScript的字符串的length属性来限制一个文本框内输入文字的多少。

本例使用JS字符串的length属性来限制一个文本框内文本的长度。大致思路如下：每当用户在文本框内输入值的时候（键盘敲击事件），都触发一个名为check的函数，它会获得文本框内字符的长度，并检查该长度是否在5-10之间。如果不是则给出对应的警告。且当输入字符多余10个的时候会自动去掉长出的部分。

实例JavaScript代码

<script type="text/javascript">
function check(){
	var str = document.getElementById("test").value;
	if(str.length < 5){
		update("至少输入5个字符！");
	}else if(str.length > 10){
		update("不能超过10个字符！");
		str = str.substring(0,10);
		document.getElementById("test").value = str.substring(0,10);
	}else{
		update("有效的用户名。")
	}
}
function update(word){
	document.getElementById("feedback").innerHTML = word;
}
</script>

HTML代码

<p>
  <label for="test">帐号：</label>
  <input type="text" name="test" id="test" onkeypress="check()" maxlength="15" />
  <span id="feedback"></span>
</p>

限制长度文本框效果

试着在下面的表单里输入文字，后面就会给出不同的提示。

  1. JavaScript字符串length
  2. JavaScript字符串charAt方法
  3. JavaScript字符串substring方法
  4. JavaScript字符串indexOf方法
  5. JavaScript字符串lastIndexOf方法
  6. JavaScript字符串replace方法
  7. JavaScript字符串split方法
  8. 用字符串的length实现限制文本框长度