一、功能:
  1.客户边输入总结同一时候张开,告诉客户还剩下多少可输入的篇幅;
  2.当凌驾规定的篇幅后,点击鲜明,会让输入框闪动
二、功用深入分析
  1.主即使用怎么样风浪?
  规范浏览器用oninput,而IE则动用onpropertychange
,那四个事件的发出条件,是文本框的值产生更动。
  2.字数的猜测。
    2.1三个国语算四个,叁个符号或数字,马耳他语,算叁个。(假诺是规定138个字,乘以2,那么正是2七十八个)
    2.2亟需采取Math.ceil方法,因为最终依旧要除以2来过来展现给顾客的字数;
  3.眨眼背景象
  这里运用了模运算,因为是再一次的动作,第一遍有颜色,第二回未有颜色,那样重复的动作,就有闪动作效果果.
  因为眼睛要来看那三遍有颜色和无颜色的效应,所以需求使用延时,setTimeout和setInterval.
这里运用的是setInterval,因为要重新动作。

一个华语算八个,三个符号或数字,土耳其共和国(Türkiye Cumhuriyeti)语,算贰个。(假使是明确1肆十三个字,乘以2,那么正是2柒十四个)。要求采取Math.ceil方法,因为最终依旧要除以2来平复彰显给客户的字数;

jQuery计算文本框字数及范围文本框字数的办法,jquery文本框

三个国语算多少个,三个符号或数字,乌Crane语,算三个。(若是是分明1三十八个字,乘以2,那么就是278个)。须求采纳Math.ceil方法,因为最后照旧要除以2来苏醒展现给客户的字数;

图片 1

$(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("您还可以输入的字数140"); 
} 
}) 
$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("您还可以输入的字数"+texts+"").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("您输入的字数超过了"+texts+"").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
,那多个事件的发出条件,是文本框的值产生变动。

字数的乘除。

壹当中文算四个,多个符号或数字,葡萄牙共和国(República Portuguesa)语,算三个。(假若是规定1叁21个字,乘以2,那么正是2八十个)。要求选取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>
还可以输入140个字<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 ) ;

多谢“妙味课堂”的摄像

图片 2

你恐怕感兴趣的篇章:

  • 文本框的字数限制作用jquery插件
  • 基于jQuery的图谋文本框字数的代码
  • 基于jQuery的计算文本框字数的代码,jQuery计算文本框字数及限制文本框字数的方法。Jquery实现仿博客园和讯获得文本框能输入的篇幅代码

贰个汉语算七个,三个符号或数字,斯洛伐克语,算贰个。(借使是规定1叁20个字,乘以…

在线演示:
打包下载://www.jb51.net/jiaoben/55149.html

$(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("您还可以输入的字数140"); 
} 
}) 
$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("您还可以输入的字数"+texts+"").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("您输入的字数超过了"+texts+"").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") 
} 
} 
}) 
})

图片 3

一、功能:

复制代码 代码如下:

顾客边输入总结同有时间张开,告诉客商还剩余多少可输入的篇幅;

$(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);
2138acom太阳集团 ,$(“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”)
}
}
})
})

当越过规定的字数后,点击分明,会让输入框闪动

你或者感兴趣的篇章:

  • 依赖HTML+CSS,jQuery编写的粗略计算器后续(加多了键盘监听)
  • 一个简练的jQuery总结器完结了一而再计算功效
  • jquery精度总计代码
    jquery钦命精确小数位
  • jQuery实现基于破壳日总括年龄 星座
    生肖
  • jQuery完毕购物车计算价格职能的格局
  • jQuery实现购物车多货品数量的加减+总价计算
  • jQuery总计textarea中文字数(剩余个数)的小程序
  • Jquery AJAX
    用于总括点击率(计算)
  • js数值总计时行使parseInt举行数据类型转变(jquery)
  • jQuery达成的轻巧在线计算器作用

二、成效剖析

关键是用哪些风浪?

网站地图xml地图