jquery实时统计文本框字数实现代码

效果如图下

实现代码如下。

 代码如下 复制代码

<script type="text/javascript" src="jquery-1.5.1.min.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;
 var num = 0;
 var sets = null;
 
 $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"});
  } 
 }
 
 //按钮点击
 $but.click(function(){
  if($(this).is(".grey")){

   sets = setInterval(flash,100);
   $tex.addClass("textColor")
  } 
  
  function flash(){
   
   num++;
   if(num == 4){
    clearInterval(sets);
   }
   if(num%2 == 1){
    $tex.addClass("textColor")
   }else{
    $tex.removeClass("textColor") 
   } 
  }
 }) 
})
</script>

css文件

 代码如下 复制代码

<style type="text/css">
.box{
 width:500px;
 margin:10px auto;}

*{
 margin:0;
 padding:0;
 }
 
p span{
 color:#069;
 font-weight:bold;
 }
 
textarea{
 width:300px;
 }
 
.textColor{
 background-color:#0C9;
 }
 
.but{
 background-color:#066;
 padding:5px;
 color:#FFF;
 border:1px solid #999;}
 
.grey{
 padding:5px;
 color:#FFF;
 background-color:#CCCCCC;}
 
 
</style>

html代码

 代码如下 复制代码

</head>

<body>
<div class="box">
 <p>请在下面输入您的文字：</p>
 <textarea name="weibao" class="tex" cols="" rows="8"></textarea>
 <input type="button" class="but" value="确定" />
</div>
</body>
</html>

注:jqyery文件本文章未提供大家可以到jquery官网去下载一个最新版本的文件，替换<script type="text/javascript" src="jquery-1.5.1.min.js"></script>就好了。

时间： 2024-09-24 06:46:24

jquery实时统计文本框字数实现代码的相关文章

Asp.net实时显示文本框字数实现代码_实用技巧

复制代码 代码如下: <script language="javascript" type="text/javascript"> function countNum() { var count=document.getElementById("txtText").value.length; document.getElementById("lblCount").value=count; } </script&

通过js实时统计文本框的输入字数限制

限制文本框输入的字符数,若达到数目则停止其输入! 以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

search-JQuery实时获取文本框中输入值的方法

问题描述 JQuery实时获取文本框中输入值的方法 做一个搜索,获取文本框实时值的方法,发现获取不到值,不知道到底怎么获取,求大神帮我解答下 <div class="brand-search"><input type="text" id="Search" name="Search" value="搜索 品牌名称" /></div> $('#Search').bind('i

Jquery实现 TextArea 文本框根据输入内容自动适应高度

原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关.但是当你输入超过一行文字的时候,TextArea自动适应高度,大大改善了体验,这样用户就可以看到全部的文字.不用再去拖动文本框的滚动条.   如下图:   这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件 - Text

jquery修改struts2文本框标签样式？

问题描述 jquery修改struts2文本框标签样式? jquery修改struts2文本框标签样式?有简单的代码举例最好 解决方案 $('#xxxx').css('background-color','#f00')//修改xxxx控件背景色为红色 解决方案二: 关于struts2 select标签默认样式的修改 解决方案三: $(xxxxx").css({ property1: 'value1', property2: 'value2' }); 解决方案四: jquery跟struts2没关

jquery+ajax+text文本框实现智能提示完整实例_jquery

本文实例讲述了jquery+ajax+text文本框实现智能提示的方法.分享给大家供大家参考,具体如下: 模仿百度查询的智能提示 先看看效果图: 代码部分: CSS代码: <style type="text/css"> #searchresult { width: 130px; position: absolute; z-index: 1; overflow: hidden; left: 130px; top: 71px; background: #E0E0E0; bord

Jquery下Textarea文本框自动适应高度实例

例1  代码如下 复制代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文本框根据输入内容自适应高度</title> <sty

JS模仿编辑器实时改变文本框宽度和高度大小的方法_javascript技巧

本文实例讲述了JS模仿编辑器实时改变文本框宽度和高度大小的方法.分享给大家供大家参考.具体如下: 这里演示JS模仿编辑器中实时改变文本框大小,包括宽度和高度的方法,在一些在线编辑器,比如eWebEditor中,就有一个功能,让文本框不断的增大或减小,以适应页面的大小,这个功能是如何实现的呢?请您参考一下这个程序,相信你会从中获益. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-editor-cha-width-height-codes/

jQuery实现表格文本框淡入更改值后淡出效果_jquery

本文分为html代码和jquery两段代码,代码很简单,大家可以参考下! html代码 <table style="border:1px solid blue"> <tr> <th>id</th> <th>name</th> <th>age</th> <th>sex</th> <th>操作</th> </tr> <tr>