首页 > 开发 > JS > 正文

jQuery计算文本框字数及限制文本框字数的方法

2024-05-06 16:29:28
字体:
来源:转载
供稿:网友
 
$tex.addClass("textColor") }else{ $tex.removeClass("textColor") } } }) })

一、功能:

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

当超过规定的字数后,点击确定,会让输入框闪动

二、功能分析

重点是用什么事件?

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

字数的计算。

一个中文算两个,一个符号或数字,英文,算一个。(如果是规定140个字,乘以2,那么就是280个)。需要用到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>还可以输入<span id="word">140</span>个字<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 ) ;


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表