下面用简单的例子示范用 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 参数);
======
======
分享到:
相关推荐
javascript获得光标所在的文本框(text textarea)中的位置.docx
主要与大家分享一个JavaScript处理textarea中的字符成每一行实例,很简单,但很实用,大家可以看看
计算 textarea 中键入的字符数,并显示在达到最大允许字符数之前还剩多少个字符。 ###如何使用: < script > jQuery ( document ) . ready ( function ( $ ) { $ ( '#comment' ) . countChars ( { ...
现在流行的Twitter等微博客...使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一段JavaScript函数,函数调用的参数为span的id和textarea的id,然后再Jav
react-textarea-counter 基本textarea字符计数器React组件。安装npm i react-textarea-counter --save基本用法import React from 'react' ;import TextareaCounter from 'react-textarea-counter' ;export default ...
TextArea动态显示输入剩余字符
主要介绍了JS简单限制textarea内输入字符数量的方法,涉及JavaScript响应鼠标及键盘事件处理textarea输入框字符的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Code:用JavaScript限制textarea输入长度 (For: IE、Firefox …) body {font-size:14px;} maxlength=10 maxlength=20 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
js验证表单大全,用JS控制表单提交 ,javascript提交表单 目录: 1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字 、只能输入汉字 3:js判断是否输入...
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字 、只能输入汉字 3:js判断是否输入英文、只能输入英文 4:js只能输入数字,判断数字、验证数字、...
1楼 textarea.value.replace(/\n/g, “ ”); 2楼 s=textarea.value.replace(/\r\n/g, “ ”); 3楼 按下的时候马上更换 V ID=”a” contentEditable=”true” style=’border:1 solid black’> 其实...
3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊...
jQuery-Plugins-CharsRemainingLimiter 限制可以输入到 TEXTAREA / INPUT 字段的字符数并提供“剩余字符数”反馈
3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊...
第1章使用JavaScript字符串 1.0简介 1.1连接两个或多个字符串 1.2连接字符串和另一种数据类型 1.3条件比较字符串 1.4在字符串中查找子字符串 1.5从一个字符串提取子字符串 1.6检查一个存在的、非空...
1:js 字符串长度限制、判断字符长度、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字 、只能输入汉字 3:js判断是否输入英文、只能输入英文 4:js只能输入数字,判断数字、验证数字、检测...