JavaScript实现模仿新浪微博原生态输入文字的实时查看功能[兼容IE6]

本文描述了用JavaScript实现的新浪微博等原生态输入文字的实时检查功能。分享给大家参考，如下：

在文本框中输入字符时，检查输入的字数并不难。但是因为有些功能容易混淆，容易造成整个结果绕不开，容易出bug。注意这里不能再用长度函数了，因为这个东西是英文一个字符，中文一个字符，不符合数据传输的形式。您也不能使用OnChange事件。在光标以文本框形式离开之前，不会触发此事件，因此必须将其更改为更直接的OnKeyUp。

一、基本目标

如下图，完成一个模仿新浪微博，不使用任何插件，纯Javascript没有JQuery的字数输入框。如果字数超过，给出相应的提示。

英语是半个字，汉语只有一个字。

二、基本布局

没什么好说的。主要是提示文字给出一个ID=test，字数的地方也是时有变化的，所以需要给出一个ID=wordLength。之后，脚本中的inputTest函数和文本框中的onkeyup事件被触发，同时将它们的当前值传递过去。同时注意字数的地方和新浪微博差不多，因为新浪微博用的是乔治亚字体，显示的是唯一的数字。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8' /title输入字数检查/title/head body p id=' test '/PS paninputtype=' text ' onkey up=' input test(this。value)' placeholder='请在此输入'/span span id=' word length ' style=' font-family : Georgia 0/10/span/body/html iii。核心脚本

script//get length函数//这里不能使用packaged方法，因为length方法在英文里算一个字符，在中文里算一个字符。函数getStrLength(str){ //将字符串传递给var mylen=0；//遍历此字符串(var I=0；istr.lengthI ){ //如果字符串的第I个字符的Unicode代码是一个介于0和128之间的英文字符，则它应该算作长度if (str。(1)0字符串的字符代码。charcode at(I)128){ mylen；}else{ //否则，计算两个长度mylen=2；} }返回mylen}//输入当字符数发生变化时触发此函数的函数输入测试(值){//首先调整getStrLength来统计当前文本框中包含的文本的值，因为getStrLength统计的是英文字符的长度，所以将其除以2并强制转换为plastic//，然后添加/10来替换wordLength中的文本。/应该被转义，否则它不能在某些编译器中传递，如dream wavedocument . getelementbyid(' worldlength ')。innerhtml=par sent(getstrlength(value)/2)' \/10 '；//如果超过10个字20个字符if(par sent(getstrlength(value))20){//则显示警告内容，并将颜色设置为红色。当然，您可以在HTML中将其设置为document.getelementbyid ('test ')。style.display=' block文件。getelementbyid ('test ')。innerhtml='太长，请修改到10个字以内'；document . getelementbyid(' test '). style . color=' # ff 0000 '；} else{ //否则隐藏警告内容文档. getelementbyid ('test ')。innerhtml=document . getelementbyid(' test '). style . display=' none '；}}/scriptPS:这里有两个功能类似的在线工具：

在线字数统计工具：http://tools.jb51.net/code/zishutongji

在线人物统计和编辑工具：http://tools.jb51.net/code/char_tongji

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript数学运算用法总结》、《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、0103010。

希望本文对JavaScript编程有所帮助。