jquery怎么控制字数多少

jquery控制字数多少的方法：1、导入外部js文件；2、在body> 标签中“$("#txt").keyup(function(){ ...} ”等代码；3、在页面加载时运行jQuery代码即可。

本文操作环境：windows7系统、jquery1.2.6版、DELL G3电脑

jquery怎么控制字数多少？

jQuery计算文本框字数及限制文本框字数的方法

一个中文算两个，一个符号或数字，英文，算一个。（如果是规定140个字，乘以2，那么就是280个）。需要用到Math.ceil方法，因为最后还是要除以2来还原显示给用户的字数;

$(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+abcnummaxNum || 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") }
 }
 }
) }
    )

一、功能：

用户边输入计算同时进行，告诉用户还剩余多少可输入的字数;

当超过规定的字数后，点击确定，会让输入框闪动

二、功能分析

重点是用什么事件？

标准浏览器用Oninput,而IE则使用onpropertychange ，这两个事件的发生条件，是文本框的值发生改变。

字数的计算。

一个中文算两个，一个符号或数字，英文，算一个。（如果是规定140个字，乘以2，那么就是280个）。需要用到Math.ceil方法，因为最后还是要除以2来还原显示给用户的字数;

闪动背景色

这里用到了模运算，因为是重复的动作，第一次有颜色，第二次没有颜色，这样重复的动作，就有闪动效果.

因为肉眼要看到这二次有颜色和无颜色的效果，所以需要用到延时,setTimeout和setInterval. 这里用到的是setInterval，因为要重复动作。

下面一段代码给大家介绍用jQuery实现限制输入字数的文本框。

1.导入外部.js文件：

script src="http://static.l99.COM/js/jquery/jquery-1.2.6.pack.js" type="text/javascript">
    /script>
    

2.在body> 标签中加入如下代码：

body>
    还可以输入span id="word">
    140/span>
    个字br />
    textarea id="txt" name="" cols="" rows="">
    /textarea>
    script language="javascript" type="text/javascript">
$("#txt").keyup(function(){
     if($("#txt").val().length >
 140){
    $("#txt").val( $("#txt").val().substring(0,140) );
}
    $("#word").text( 140 - $("#txt").val().length ) ;
}
    );
    /script>
    /body>
    

3.如果页面加载时输入框中有默认文本，那么要在页面加载时运行如下jQuery代码，方能正确显示：

$("#word").text( 140 - $("#txt").val().length ) ;
    

推荐学习：《jquery视频教程》

以上就是jquery怎么控制字数多少的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！