用户边输入计算同时进行,告诉用户还剩余多少可输入的字数,当超过规定的字数后,点击确定,会让输入框闪动

一、功能: 
  1.用户边输入计算同时进行,告诉用户还剩余多少可输入的字数; 
  2.当超过规定的字数后,点击确定,会让输入框闪动 
二、功能分析 
  1.重点是用什么事件? 
  标准浏览器用oninput,而IE则使用onpropertychange ,这两个事件的发生条件,是文本框的值发生改变。 
  2.字数的计算。 
    2.1一个中文算两个,一个符号或数字,英文,算一个。(如果是规定140个字,乘以2,那么就是280个) 
    2.2需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数; 
  3.闪动背景色 
  这里用到了模运算,因为是重复的动作,第一次有颜色,第二次没有颜色,这样重复的动作,就有闪动效果. 
  因为肉眼要看到这二次有颜色和无颜色的效果,所以需要用到延时,setTimeout和setInterval. 这里用到的是setInterval,因为要重复动作。

感谢“妙味课堂”的视频

在线演示:http://demo.jb51.net/js/2012/myinputCount/
打包下载:http://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("您还可以输入的字数<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")
}
}
})
})

  

基于jQuery的计算文本框字数的代码-jquery的更多相关文章

  1. js 实时计算文本框字数限制

    $.fn.myTarea = function(){ return this.each(function(){ $(this).bind('input propertychange', functio ...

  2. 修改input和textarea的placeholder的颜色,限制文本框字数输入

    <style type="text/css"> textarea{ width: 400px; height:400px; resize: none; } .limit ...

  3. (三)在js(jquery)中获得文本框焦点和失去焦点的方法

    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...

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

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  5. jquery获得下拉框值的代码

    jquery获得下拉框值的代码   获取Select :  获取select 选中的 text :  $("#ddlRegType").find("option:sele ...

  6. 基于JQuery实现的文本框自动填充功能

    1. 实现的方法 /* * js实现的文本框的自动完成功能 */ function doAutoComplete(textid,dataid,url){ $("#" + texti ...

  7. 基于bootstrap的富文本框——wangEditor【欢迎增加开发】

    先来一张效果图: 01. 引言 老早就開始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的样例. 如今网络上开源的富文本框插件许多 ...

  8. JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点

    今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...

  9. 通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. C#预定义类型

    C#提供了16中预定义类型,其中包括13种简单类型和三种非简单类型: 所有预定义类型的名称全部由小写字母组成.预定义的简单类型包括以下3种:11种数值类型.一种Unicode字符类型char.一种布尔 ...

  2. 利用WGET下载文件,并保存到指定目录

    wget是Linux上一个非常不错的下载指令,也算是Linux工作者常用的指令之一 而这个指令我想在各大系统都预设有提供,包括了Ubuntu.Fedora等,而一般来说,要使用wget下载档案,只需要 ...

  3. Vim进阶技术:搜索和替换

    行内搜索 行内搜索,也就是在当前行内进行搜索和移动,通常都与编辑命令一起使用. fx -- 移动到下一个字符x的位置,光标停留在x字符上面 tx -- 移动到下一个字符x的位置,光标停留在x前一个字符 ...

  4. Java:Swing篇,实现JList、JTextArea的自动滚动,实时刷新功能

    1. 功能 作为swing的组件,JList与JTextArea是不可以单独实现滚动功能的,需要与JScrollPane结合才可以. 本代码中: JList实现从其它数据源获取数据,然后依次对这些数据 ...

  5. [Jobdu] 题目1510:替换空格

    题目描述: 请实现一个函数,将一个字符串中的空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 输入: 每个输入文件仅包含一组测 ...

  6. typedef的用法再思考

    最近重读c语法,有所感悟,记录. 有时候感悟,其实就是猜,假想,作者创建语言的想法,通俗的讲就是丹尼斯灵魂附体了,这个时候任何c语言难点对于你来说,就像吃饭喝水一样简单了,同时还能发现它优美动人之处. ...

  7. [svc] cisco router as ca server

    把cisco路由器配置成ca服务器 参考 clock set 10:00:00 Dec 23 2017 conf t crypto key generate rsa general-keys labe ...

  8. [svc]磁盘接口与RAID

    一 磁盘接口 IDE 传统家用: /dev/hda1 SISC 传统服务器: /dev/sdb1 SATA 现在家用 SAS 现在服务器用 FC(光纤通道) 高级服务器 注意: 分区编号,1-4只能给 ...

  9. 飘逸的python - 几行代码实现unix管道风格的函数调用

    用过linux的基本知道它的管道,是将一个程序或命令的输出作为还有一个程序或命令的输入. 废话少说,以下我们看用python怎么实现unix管道风格的函数调用. #coding=utf-8 class ...

  10. nyoj119 士兵杀敌(三)

    士兵杀敌(三) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5   描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进 ...