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


<!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>