基于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 相关文章推荐
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
js实现倒计时关键代码
May 05 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
vue实现图书管理系统
Dec 29 Vue.js
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新手上路(十)
2006/10/09 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
python实现单向链表详解
2018/02/08 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
对python:print打印时加u的含义详解
2018/12/15 Python
python 用下标截取字符串的实例
2018/12/25 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
python上selenium的弹框操作实现
2020/07/13 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
中式婚礼主持词
2014/03/13 职场文书
食品安全承诺书
2014/05/22 职场文书
商家认证委托书格式
2014/10/16 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书