本文主要和大家介绍javascript实现的仿新浪微博原生态输入字数即时检查功能,涉及javascript事件响应及字符串的遍历、转换、判断等相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。
边在文本框输入字符边对输入的字数进行检查本来不难的，但是由于其中有些函数的使用方式大家容易混乱，很容易导致整个结果搞来搞去也没有搞出来，也容易出Bugs，注意这里不能再使用length函数了，因为这个东西英文算一个字符，汉字也算一个字符，不符合数据传递的形式。也不能用OnChange事件了，这事件要光标离开为文本框才会触发，必须改成更加即时的OnKeyUp。
一、基本目标
如下图，完成一个仿新浪微博的，不用任何插件，纯Javascript无JQuery的带字数统计的输入框，如果超出字数则给出相应的提示。
英文算半个字，中文才算1个字。
立即学习“Java免费学习笔记（深入）”；
二、基本布局
没什么好说的。主要是提示文字给一个ID=test，字数统计的地方因为时时变更，因此也要给出一个ID=wordLength，之后脚本处的inputTest函数，又文本框的onkeyup事件触发，同时把自己此刻的值传递过去。同时注意到，字数统计的地方之所以与新浪微博的部分相似，就是因为新浪微博那里用了Georgia字体，这字体显示的数字比较独特。
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">输入字数检查 0/10
登录后复制
三、核心脚本
//获取长度函数//这里不能用封装好的方法，因为length方法，英文算一个字符，中文也算一个字符function getStrLength(str){ //传递一个字符串过来 var mylen=0; //遍历这个字符串 for(var i=0;i0&&str.charCodeAt(i)20){ //那么把警告内容显示出来，并把其中的颜色设置为红色，当然，你在HTML那里设置也可以 document.getElementById("test").style.display="block"; document.getElementById("test").innerHTML="太长，请修改至10字之内"; document.getElementById("test").style.color="#ff0000"; } else{ //否则隐藏警告内容 document.getElementById("test").innerHTML=""; document.getElementById("test").style.display="none"; }}
登录后复制
相关推荐：
JavaScript实现选中文字提示新浪微博分享效果
JS中实现新浪微博分享效果的实例教程
ThinkPHP仿新浪微博项目实战视频教程_高清+源码
以上就是JavaScript实现新浪微博输入字数即时检查功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2788037.html
