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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
JavaScript中对象介绍
Dec 31 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
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概述.
2006/10/09 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
js URL参数的拼接方法比较
2012/02/15 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
浅析Git版本控制器使用
2017/12/10 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
python画图的函数用法以及技巧
2019/06/28 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
nohup的用法
2014/08/10 面试题
村长贪污检举信
2014/04/04 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
餐馆开业致辞
2015/08/01 职场文书
小学校园广播稿
2015/08/18 职场文书
python 实现的截屏工具
2021/05/08 Python