代码如下:
<div
class="area">
<p>
还可以输入<b
class="num">140</b>字</p>
<textarea
class="chackTextarea"></textarea>
</div>
<script
type="text/javascript">
var
txtobj
=
{
divName:
"area",
//外层容器的class
textareaName:
"chackTextarea",
//textarea的class
numName:
"num",
//数字的class
num:
140
//数字的最大数目
}
var
textareaFn
=
function
()
{
//定义变量
var
$onthis
//指向当前
var
$divname
=
txtobj.divName
//外层容器的class
var
$textareaName
=
txtobj.textareaName
//textarea的class
var
$numName
=
txtobj.numName
//数字的class
var
$num
=
txtobj.num
//数字的最大数目
function
isChinese(str)
{
//判断是不是中文
var
reCh
=
/[u00-uff]/
return
!reCh.test(str)
}
function
numChange()
{
var
strlen
=
0
//初始定义长度为0
var
txtval
=
$.trim($onthis.val())
for
(var
i
=
0
i
<
txtval.length
i++)
{
if
(isChinese(txtval.charAt(i))
==
true)
{
strlen
=
strlen
+
2
//中文为2个字符
}
else
{
strlen
=
strlen
+
1
//英文一个字符
}
}
strlen
=
Math.ceil(strlen
/
2)
//中英文相加除2取整数
if
($num
-
strlen
<
0)
{
$par.html("超出
<b
style='color:redfont-weight:lighter'
class="
+
$numName
+
">"
+
Math.abs($num
-
strlen)
+
"</b>
字")
//超出的样式
}
else
{
$par.html("还可以输入
<b
class="
+
$numName
+
">"
+
($num
-
strlen)
+
"</b>
字")
//正常时候
}
$b.html($num
-
strlen)
}
$("."
+
$textareaName).live("focus",
function
()
{
$b
=
$(this).parents("."
+
$divname).find("."
+
$numName)
//获取当前的数字
$par
=
$b.parent()
$onthis
=
$(this)
//获取当前的textarea
var
setNum
=
setInterval(numChange,
500)
})
}
textareaFn()
</script>
通常的做法就是使用JavaScript脚本语言来实现对textarea文本域的字数输入限制，简单而实用。假设我们有一个id为 txta1 的textarea文本区，我们可以通过以下代码限制它的键盘输入字数为10个字（汉字或其他小角字符）：
<script language=javascript type=text/ecmascript>
window.onload = function()
{
document.getElementById('txta1').onkeydown = function()
{
if(this.value.length >= 10)
event.returnValue = false
}
}
</script>
它的原理是通过对keydown（键盘键位按下）事件对指定id号的文本区进行监测，它只能限制键盘输入，如果用户通过鼠标右键粘贴剪切板中的文本，它无法控制字数。试看以下效果，请尝试用键盘输入：
速度速度分散对
通过键盘输入，以上文本区只能输入10个字。但是，我们的目的并没有达到！请随便复制一些文本，试着用鼠标右键粘贴，看看发生了什么。
你可以在网上找到类似上述的其他JS脚本，它们不管多么优秀，其原理都是一样的，通过对keydown、keyup或keypress之类的键盘键位 *** 作事件来监控文本区的输入，无法防止鼠标右键的粘贴，为此，如果一定要真正地限制textarea的字数，我们还得为网页加另一把锁——禁用鼠标右键，这无疑得付出额外的开销，同时也可能是网页制作者不一定愿意做的。其实，还有一个更简单的方法，使用onpropertychange属性。
onpropertychange可以用来判断预定元素的value值，当元素的value值发生变化时判断事件就会被触发，仅关心被监测元素的value值，避开了输入的来源，从而可以比较理想地达成我们的限制字数这一目的。它属于JS范畴，可以在表单方框区代表中嵌套使用，以下是代码和效果样式，可以像上面那样测试输入，你会发现它真正达到目的：不管用什么方式输入，它只能输入100个字（汉字或其他小解符号）：
代码：
<textarea onpropertychange=if(value.length>100) value=value.substr(0,100) class=smallArea cols=60 name=txta rows=8></textarea>
样式：
当然，为了更为保险，处理表单数据的后台脚本程序还应该对提交来的数据进行再一次的检测，如果字数超出预设的数量则进行相应处理，这样才达到真正限制字数的目的。
文本框 textarea限制输入文字个数的的javascript代码，我们经常在评论留言页面我们需要在客户端限制访客的留言长度，当然最好我们在服务器端也要加上相应的代码，因为客户端的限制是相对的。本文整理了3种限制输入字符数的方法：
方法一：文本框textarea限制输入文字个数为200个
<h3>设计理念说明（200字以内）</h3>
<textarea onkeyup="checkLen(this)"></textarea>
<div>您还可以输入 <span id="count">200</span>个文字</div>
<script type="text/javascript">
function checkLen(obj)
{
var maxChars = 200//最多字符数
if (obj.value.length >maxChars)
obj.value = obj.value.substring(0,maxChars)
var curr = maxChars - obj.value.length
document.getElementByIdx_x("count").innerHTML = curr.toString()
}
</script>
[提示：你可先修改部分代码，再按运行]
方法二：显示已经用字数和剩余字数
<script>
function cal() {
if(a.value.length>20) {
a.value=a.value.slice(0,20)
b.value=20
c.value=0
}
else {
b.value=a.value.length
c.value=20-eval_r(b.value)
}
}
</script>
<textarea id="a" onpropertychange="cal()"></textarea>
已有字数：<input id=b size=5 value="0" disabled>
剩余字数：<input id=c size=5 value="20" disabled><br>
[提示：你可先修改部分代码，再按运行]
方法三：支持双字节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>文本框textarea限制输入文字个数的方法 - 中国asp之家</TITLE>
</HEAD>
<BODY>
<textarea onkeyup="cls(this,50,'v')" oncontextmenu="cls(this,50,'v')"></textarea>
<span id="v"></span>
<script type="text/javascript">
function cls(obj,max,v){
var reg=/[^x00-xff]/gm
var str=obj.value.replace(reg,'aa')//全换成单字节字符计算
var v=document.getElementByIdx_x('v')
if(str.length>max){
var n=0,strr=[]
for(var i=0i<obj.value.lengthi++){//得到50字节以内的字符
/[^x00-xff]/.test(obj.value.charAt(i))?n+=2:n+=1
if(n>max)break
strr.push(obj.value.charAt(i))
}
obj.value=strr.join('')
v.innerHTML=0
}else{
v.innerHTML=max-str.length
}
}
</script>
</BODY>
</HTML>
[提示：你可先修改部分代码，再按运行]
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）