您的位置：首页 > 运维架构 > 网站架构

textArea 输入内容字数统计

2014-01-08 22:09 295 查看

很多网站在评论的时候都会有一个输入框让用户输入特定的字数，当用户输入的内容的时候下方会把可输入的字数减少，这样就可以让用户清楚的知道自已还剩余的字数，以便组织自已的语言，下面是我做的一个输入框的小例子

<!DOCTYPE html>
<html>
<head>
<title>enter</title>
<script language="javascript">
function keypress2() //textarea输入长度处理
{
//获取输入框的额内容 document.getElementById(" ") 得到的是一个对象，用 alert 显示得到的是
//“ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才
//是具体的值！
//得到输入框中的值
var text1=document.getElementById("myarea").value;
var len;//记录剩余字符串的长度
if(text1.length>=300)//textarea控件不能用maxlength属性，就通过这样显示输入字符数了 text1.length 计算出内容的长度
{
document.getElementById("myarea").value=text1.substr(0,1000); //substr 用于从字符串提取制定字符串，参数为start lenth
len=0;
}
else
{
//计算还可以输入多少字
len=1000-text1.length;
}
var show="你还可以输入"+len+"个字";
//把剩余字数插入lable中
document.getElementById("pinglun").innerText=show;
}

//这个方法跟上边的方法一样的了，
function shiqujiaodian(){
var text=document.getElementById("myarea").value;
//唯一不一样的就是这句了，这句话就是当输入框失去焦点的时候显示的字符
if(document.getElementById("myarea").value == '' ) document.getElementById("myarea").value = '请输入您的问题描述或建议...';
var len;
if(text.length>=1000){
document.getElementById("myarea").value=text.substr(0,1000);
len=0;
}else{
len=1000-text.length;
}
var show="你还可以输入"+len+"个字";
document.getElementById("pinglun").innerText=show;
}

</script>

</head>
<body>
<center>
<div style="text-align:left;">

<h3>评论内容:</h3><br>
//这是一个TextArea输入框，其中onKeyUp方法是键盘谈起事件，onblur 方法是失去焦点事件 onfocus方法是获取光标事件
<p> <textarea id="myarea" name="userMessage" cols="" rows="" class="feedback_textarea" onKeyUp="keypress2()" onfocus="javascript:if(this.value == '请输入您的问题描述或建议...') this.value = '';" onblur="shiqujiaodian()">请输入您的问题描述或建议...</textarea>
//这里显示的是用户还可以输入的词
<font color="gray"><label id="pinglun">你还可以输入1000个字</label></font>
<div>
</center>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 网站字符串记录统计 function

相关文章推荐

新的分享

章节导航