文本框textarea实时提示还可以输入多少文字
2016-02-23
展开全部
文本框 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=0;i<obj.value.length;i++){//得到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>
[提示:你可先修改部分代码,再按运行]
限制输入文字个数的的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=0;i<obj.value.length;i++){//得到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>
[提示:你可先修改部分代码,再按运行]
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询