js实现文本框输入文字个数限制代码
2015-12-25 08:22
846 查看
通常情况下,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,较为人性化的网站可能会有可输入字数倒计效果,比如还剩余20可以输入这样的提示,下面就通过一个实例介绍一下如何实现此效果。
先看看效果图:
代码如下:
<html> <head> <title>文本框输入文字倒计效果代码</title> <style type="text/css"> * { margin:0; padding:0; } .box { width:500px; margin:10px auto; } p span { color:#069; font-weight:bold; } textarea { width:300px; } .textColor { background-color:#0C9; } .grey { padding:5px; color:#FFF; background-color:#CCCCCC; } </style> <script type="text/javascript" src="jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ var $tex=$(".tex"); var $but=$(".but"); var ie=jQuery.support.htmlSerialize; var str=0; var abcnum=0; var maxNum=280; var texts=0; $tex.val(""); $tex.focus(function(){ if($tex.val()=="") { $("p").html("您还可以输入的字数<span>140</span>"); } }) $tex.blur(function(){ if($tex.val() == "") { $("p").html("请在下面输入您的文字:"); } }) if(ie) { $tex[0].oninput = changeNum; } else { $tex[0].onpropertychange = changeNum; } function changeNum() { //汉字的个数 str=($tex.val().replace(/\w/g,"")).length; //非汉字的个数 abcnum=$tex.val().length-str; total=str*2+abcnum; if(str*2+abcnum<maxNum||str*2+abcnum==maxNum) { $but.removeClass() $but.addClass("but"); texts=Math.ceil((maxNum-(str*2+abcnum))/2); $("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"}); } else if(str*2+abcnum>maxNum) { $but.removeClass("") $but.addClass("grey"); texts =Math.ceil(((str*2+abcnum)-maxNum)/2); $("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"}); } } }) </script> </head> <body> <div class="box"> <p>请在下面输入您的文字:</p> <textarea name="weibao" class="tex" cols="" rows="8"></textarea> </div> </body> </html>
希望本文所述对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js可突破windows弹退效果代码
- jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
- css文本框与按钮美化效果代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- CSS小例子(只显示下划线的文本框,像文字一样的按钮)
- js显示当前星期的起止日期的脚本
- 点击按钮后 文本框变为Select下拉列表框
- C#判断多个文本框是否为空的方法
- css样式之区分input是按钮还是文本框的方法第1/4页
- 爆炸式的JS圆形浮动菜单特效代码
- js+css使文本框自动适应内容的高度
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例