javascript 控制 textarea 字符数

最新推荐文章于 2022-12-13 15:42:32 发布

iteye_20332

最新推荐文章于 2022-12-13 15:42:32 发布

阅读量134

点赞数

分类专栏： html_xml_js_css_div 文章标签： JavaScript XHTML HTML ViewUI

html_xml_js_css_div 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

下面用简单的例子示范用 js 控制 textarea 的字符数；

======
示例1
======


<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<script type="text/javascript">
			function textcontrol(taId,maxSize) {
				// 默认 最大字符限制数
				var defaultMaxSize = 200;
				var ta = document.getElementById(taId);
				// 检验 textarea 是否存在
				if(!ta) {
					return;
				}
				// 检验 最大字符限制数 是否合法
				if(!maxSize) {
					maxSize = defaultMaxSize;
				} else {
					maxSize = parseInt(maxSize);
					if(!maxSize || maxSize < 1) {
						maxSize = defaultMaxSize;
					}
				}
				　　 if (ta.value.length > maxSize) {
					ta.value=ta.value.substring(0,maxSize);
					alert("超过最大字符限制："+maxSize);
				} 
			}
		</script>
	</head>
	<body>
		<textarea name="ta1" id="ta1" cols="50" rows="10" onkeyup="textcontrol(this.id)"></textarea>
		<textarea name="ta2" id="ta2" cols="50" rows="10" onkeyup="textcontrol(this.id,5)"></textarea>
	</body>
</html>

使用说明：
js 的 textcontrol(taId,maxSize) 方法接受2个参数：
* 第一个参数表示需要校验的 textarea 的 id，这个参数不能为空；
* 第二个参数是最大字符限制数，是可选的，如果没有这个参数，或者这个参数不合法，则用 600

注意：
这个示例无法对右键粘贴进行检测，下面的示例可以；

======
示例2
======


<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<script type="text/javascript">
			// onchange 事件时（等同于 失去焦点），提示并限制字符数
			function taCheckOnChange(taId,maxSize) {
				// 默认 最大字符限制数
				var defaultMaxSize = getDefaultMaxSize();
				var ta = document.getElementById(taId);
				// 检验 textarea 是否存在
				if(!ta) {
					return;
				}
				// 检验 最大字符限制数 是否合法
				if(!maxSize) {
					maxSize = defaultMaxSize;
				} else {
					maxSize = parseInt(maxSize);
					if(!maxSize || maxSize < 1) {
						maxSize = defaultMaxSize;
					}
				}
				// 提示当前输入字符数
				var taTipDiv = document.getElementById("taTipDiv");
				taTipDiv.innerHTML=("当前字符数：" + ta.value.length + "，字数限制：" + maxSize);
			　　 if (ta.value.length > maxSize) {
					alert("当前字数 "+ta.value.length+" ，超过最大字符限制数 "+maxSize+" ，点击 \"确定\" 将自动截断。");
					ta.value=ta.value.substring(0,maxSize);
					taTipDiv.innerHTML=("当前字数：" + ta.value.length + "，字数限制：" + maxSize);
				} 
			}
			// 当键盘输入时，提示并限制字符数
			function taCheckOnKeyUp(taId,maxSize) {
				// 默认 最大字符限制数
				var defaultMaxSize = getDefaultMaxSize();
				var ta = document.getElementById(taId);
				// 检验 textarea 是否存在
				if(!ta) {
					return;
				}
				// 检验 最大字符限制数 是否合法
				if(!maxSize) {
					maxSize = defaultMaxSize;
				} else {
					maxSize = parseInt(maxSize);
					if(!maxSize || maxSize < 1) {
						maxSize = defaultMaxSize;
					}
				}	
				// 检验 最大字符限制数 是否合法
				if (ta.value.length > maxSize) {
					ta.value=ta.value.substring(0,maxSize);
				} 
				// 提示当前输入字符数
				var taTipDiv = document.getElementById("taTipDiv");			
                                taTipDiv.innerHTML=("当前字数：" + ta.value.length + "，字数限制：" + maxSize);
			}
			// 获得 默认 最大字符限制数
			function getDefaultMaxSize() {
				return 200;
			}
		</script>
	</head>
	<body>
		<div id="taTipDiv"></div>
		<textarea name="ta1" id="ta1" cols="50" rows="10" onkeyup="taCheckOnKeyUp(this.id,20)" onchange="taCheckOnChange(this.id,20)" ></textarea>
	</body>
</html>

使用说明：
有2个方法：
* taCheckOnKeyUp(taId,maxSize) 在 onkeyup 事件时触发，提示当前输入的字符数，并限制输入，这个方法可以对键盘的输入进行限制，对于右键粘贴是无效的；
* taCheckOnChange(taId,maxSize) 在 onchange 事件时触发（相当于失去焦点时），提示当前输入的字符数，多余的字符自动截断，这个方法主要是针对右键粘贴检测；

注意：
这个例子中使用了2个js方法进行判断，调用这2个js方法时共同的参数也应当相同（比如 maxSize 参数）；

======

======