信鸽网

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

  作者：bea

通常情况下，文本框输入的文字个数并不是无限制的，一般都会限定一个输入最高上限，较为人性化的网站可能会有可输入字数倒计效果，比如还剩余20可以输入这样的提示，下面就通过一个实例介绍一下如何实现此效果。 先看看效果图： 代码如下: <html> <head> <title>文本框输入文字倒计效果代码</title> <style type="text/css"> * { margin:0; padding:

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


先看看效果图：



代码如下:




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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: