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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
javascript 表单规则集合对象
Jul 21 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
vue路由的配置和页面切换详解
Sep 09 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+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
jquery中动态效果小结
2010/12/16 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
hammer.js实现图片手势放大效果
2017/08/29 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
vue实现计步器功能
2019/11/01 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python中类的继承代码实例
2014/10/28 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
应届生英语教师求职信
2013/11/05 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
赔偿协议书
2015/01/27 职场文书
国家助学金受助感言
2015/08/01 职场文书
新兵入伍决心书
2015/09/22 职场文书
消防安全培训工作总结
2015/10/23 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技