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 相关文章推荐
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
vue增删改查的简单操作
Jul 15 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
vue实现路由切换改变title功能
May 28 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
JS实现小米轮播图
Sep 21 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP chr()函数讲解
2019/02/11 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
理解JavaScript原型链
2016/10/25 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
python如何统计代码运行的时长
2019/07/24 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
美国保健品专家:Life Extension
2018/05/04 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
学生会干部自荐信
2014/02/04 职场文书
出国留学经济担保书
2014/04/01 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
投诉信范文
2015/07/02 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers