基于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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
vue生命周期的探索
Apr 03 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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利用cookie实现访问次数统计代码
2011/05/19 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
react-native之ART绘图方法详解
2017/08/08 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
Python简单实现控制电脑的方法
2018/01/22 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
jupyter 添加不同内核的操作
2021/02/06 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
编辑个人求职信范文
2013/09/21 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
文秘大学生求职信
2014/02/25 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
广播体操比赛主持词
2015/06/29 职场文书
Docker下安装Oracle19c
2022/04/13 Servers