主页 / 网络编程 /

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

网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了js实现文本框输入文字个数限制代码，文本框输入的文字个数并不是无限制的，一般都会限定一个输入最高上限，如何限制，请看本文

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

先看看效果图

代码如下:

<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 abum=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("请在狼蚁网站SEO优化输入您的文字"); 
 } 
 }) 
 if(ie) 
 { 
  $tex[0].oninput = changeNum; 
 } 
 else 
 { 
  $tex[0].onpropertychange = changeNum; 
 } 
 
 function changeNum() 
 { 
 //汉字的个数 
 str=($tex.val().replace(/\w/g,"")).length; 
 //非汉字的个数 
 abum=$tex.val().length-str; 
 total=str2+abum; 
 if(str2+abum<maxNum||str2+abum==maxNum) 
 { 
  $but.removeClass() 
  $but.addClass("but"); 
  texts=Math.ceil((maxNum-(str2+abum))/2); 
  $("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"}); 
 } 
 else if(str2+abum>maxNum) 
 { 
  $but.removeClass("") 
  $but.addClass("grey"); 
  texts =Math.ceil(((str2+abum)-maxNum)/2); 
  $("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"}); 
 } 
 } 
}) 
</script> 
</head> 
<body> 
<div class="box"> 
 <p>请在狼蚁网站SEO优化输入您的文字</p> 
 <textarea name="weibao" class="tex" cols="" rows="8"></textarea> 
</div> 
</body> 
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

上一篇：基于jquery实现省市区三级联动效果 下一篇：js实现简单的验证码

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by