基于jQuery的计算文本框字数的代码


Posted in Javascript onJune 06, 2012

一、功能:

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

2.当超过规定的字数后,点击确定,会让输入框闪动
二、功能分析

1.重点是用什么事件?

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

2.字数的计算。

2.1一个中文算两个,一个符号或数字,英文,算一个。(如果是规定140个字,乘以2,那么就是280个)

2.2需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数;

3.闪动背景色

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

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

感谢“妙味课堂”的视频

在线演示:http://demo.3water.com/js/2012/myinputCount/
打包下载:https://3water.com/jiaoben/55149.html

基于jQuery的计算文本框字数的代码

$(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") 
} 
} 
}) 
})
Javascript 相关文章推荐
取得传值的函数
Oct 27 Javascript
Javascript Global对象
Aug 13 Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 #Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 #Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 #Javascript
javascript中获取下个月一号,是星期几
Jun 01 #Javascript
一行代码告别document.getElementById
Jun 01 #Javascript
javascript的console.log()用法小结
May 31 #Javascript
jQuery 联动日历实现代码
May 31 #Javascript
You might like
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
Python常见数据类型转换操作示例
2019/05/08 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
健康家庭事迹材料
2014/05/02 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL