JavaScript如何实现csdn论坛（你可输入*个字符）

Question

<textarea id="textarea" name="textarea"  onkeyup="fx1()"></textarea><span name="s1" id="s1">还可输入500个字符</span>
<script>
function fx1(){
document.all['s1'].innerText="还可输入"+parseInt(500-document.all['textarea'].value.length)+"个字符";
}
</script>

Answer 1

JS 部分// JavaScript Document
/*******************************
Model:All
*Info:Description Text 's Validity
*Date:2007-10-10
*Author:Yuming
*******************************/
//定义字符串长度
var Desp_Char_Num=255;
var mem=0;
//将中文字符的长度转换为英文字符的长度
function utf16to8(str) {
        var out, i, len, c;        out = "";
        len = str.length;
        for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
//alert("1---"+out+"---"+out.length);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
//alert("2---"+out+"---"+out.length);
} else {
out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
//alert("3---"+out+"---"+out.length);
}
        }
        return out;
}
//计算字符串整体长度
function Desp_value_count(obj)
{
var temp = document.getElementById(obj);
var strValue=temp.value;
//去除左右空格
strValue=strValue.replace(/\\r/g,"\r");
strValue=strValue.replace(/\\n/g,"\n");
return  utf16to8(strValue).length;
}
//把对象的值暂存在一个变量中，以便执行完utf16to8函数后，把改过的对象值还原成原来的值
function substr_desp(obj)
{
if(mem==0)
{
var test=document.getElementById(obj);
mem=test.value.length;
}
}
//时时地显示用户还可以输入多少字符
function LimitDesp(obj,span_obj,msg1,msg2,msg3)
{

var test=document.getElementById(obj);
var test_show=document.getElementById(span_obj);
if(test)
{

test_show.className="span_match_class";

if(test.value.length==0)
{
Desp_Char_Num=256-Desp_value_count(obj);
mem=0;
}
if(Desp_value_count(obj)==255)
{
substr_desp(obj);
test_show.innerHTML=msg2+" "+0+" "+msg3;
//test.value=test.value.substr(0,mem);
return false;
}
else if(Desp_value_count(obj)>255)
{
substr_desp(obj);
test_show.innerHTML=msg1;
//test.value=test.value.substr(0,mem);
return false;
}
else
{
Desp_Char_Num=256-Desp_value_count(obj);
Desp_Char_Num--;
test_show.innerHTML=msg2+" "+Desp_Char_Num+" "+msg3;
mem=0;
}
setTimeout(" LimitDesp()",1000);
}
}//带输入字符长度限制的 多加入变量 num
function LimitDesp_inputN(obj,span_obj,msg1,msg2,msg3,num)
{

var test=document.getElementById(obj);
var test_show=document.getElementById(span_obj);
if(test)
{
var input_num=parseInt(num);
test_show.className="span_match_class";

if(test.value.length==0)
{
Desp_Char_Num=(input_num+1)-Desp_value_count(obj);
mem=0;
}
if(Desp_value_count(obj)==input_num)
{
substr_desp(obj);
test_show.innerHTML=msg2+" "+0+" "+msg3;
//test.value=test.value.substr(0,mem);
return false;
}
else if(Desp_value_count(obj)>(input_num))
{
substr_desp(obj);
test_show.innerHTML=msg1;
//test.value=test.value.substr(0,mem);
return false;
}
else
{
Desp_Char_Num=(input_num+1)-Desp_value_count(obj);
Desp_Char_Num--;
test_show.innerHTML=msg2+" "+Desp_Char_Num+" "+msg3;
mem=0;
}
setTimeout(" LimitDesp_inputN()",1000);
}
}<!--yuming.chen 20071010  info:Description text check-->

Answer 2

HTML部分。。这里使用的是TEXTAREA，你可以采用TEXT，调用的事件一样，这里没有考虑到鼠标的粘贴和剪切，不很完美，可以适当加入事件进行控制，根据项目需求<tr>
                <td width="200" height="30" align="right"><?php echo $Edit_LDAP_AD_ED['Comments'] ?></td>
                <td height="30" align="left"><textarea name="pcDesp" cols="45" rows="5" class="input" id="pcDesp" onkeydown="LimitDesp('pcDesp','span_Desp','<?php echo $js_la['desp_chao'] ?>','<?php echo $js_la['desp_shengyu'] ?>','<?php echo $js_la['desp_danwei'] ?>')"  onkeyup="LimitDesp('pcDesp','span_Desp','<?php echo $js_la['desp_chao'] ?>','<?php echo $js_la['desp_shengyu'] ?>','<?php echo $js_la['desp_danwei'] ?>')"><?php echo htmlspecialchars($db_DevADGet["Desp"]) ?></textarea>
</td>
              </tr>
  <tr>
                <td width="200" height="30" align="right"></td>
                <td height="30" align="left"><div>
<span id="span_Desp"></span></div></td>
              </tr>