js实现文本框输入文字个数限制代码


Posted in Javascript onDecember 25, 2015

通常情况下,文本框输入的文字个数并不是无限制的,一般都会限定一个输入最高上限,较为人性化的网站可能会有可输入字数倒计效果,比如还剩余20可以输入这样的提示,下面就通过一个实例介绍一下如何实现此效果。

先看看效果图:

js实现文本框输入文字个数限制代码

代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 命名空间 使用介绍
Aug 29 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
js实现简单的验证码
Dec 25 #Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 #Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 #Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 #Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 #Javascript
基于JS2Image实现圣诞树代码
Dec 24 #Javascript
jquery读写cookie操作实例分析
Dec 24 #Javascript
You might like
php中heredoc与nowdoc介绍
2014/12/25 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
PHP7 新增常量
2021/03/09 PHP
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
对javascript继承的理解
2016/10/11 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
python 链接和操作 memcache方法
2017/03/04 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
大学自我鉴定
2013/12/20 职场文书
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
班训口号大全
2014/06/18 职场文书
授权委托书协议书
2014/10/16 职场文书
碧霞祠导游词
2015/02/09 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL