js实现文本框输入文字个数限制代码

通常情况下，文本框输入的文字个数并不是无限制的，一般都会限定一个输入最高上限，较为人性化的网站可能会有可输入字数倒计效果，比如还剩余20可以输入这样的提示，下面就通过一个实例介绍一下如何实现此效果。

先看看效果图：

代码如下:

<html>
<head>
<title>文本框输入文字倒计效果代码</title>
<style type="text/css">
*
{
 margin:0;
 padding:0;
}
.box
{
 width:500px;
 margin:10px auto;
}
p span
{
 color:#069;
 font-weight:bold;
}
textarea
{
 width:300px;
}
.textColor
{
 background-color:#0C9;
}
.grey
{
 padding:5px;
 color:#FFF;
 background-color:#CCCCCC;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
 var $tex=$(".tex");
 var $but=$(".but");
 var ie=jQuery.support.htmlSerialize;
 var str=0;
 var abcnum=0;
 var maxNum=280;
 var texts=0; 

 $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"});
 }
 }
})
</script>
</head>
<body>
<div class="box">
 <p>请在下面输入您的文字：</p>
 <textarea name="weibao" class="tex" cols="" rows="8"></textarea>
</div>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js文本框走动跑马灯效果代码分享

    js文本框走动跑马灯效果代码分享

    本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文本框走动跑马灯代码</title> </

  • js计算文本框输入的字符数

    js计算文本框输入的字符数

    使用JavaScript实时的计算用户当前输入的字符数函数代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript统计字符数</title> <script language="javascript"> function C

  • js点击文本框弹出可选择的checkbox复选框

    本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/

  • javascript特殊文本输入框网页特效

    本文实例为大家分享了特殊js文本输入框网页特效,供大家参考,具体内容如下 实例一:让文本框只带有下划线 <script type="text/javascript"> function changeTextStyle(){ //让文本框只带有下划线 //获得文本框的DOM var myText = document.getElementById("myText"); myText.style.borderColor = 'black'; //设置边框颜色

  • js文本框输入内容智能提示效果

    js文本框输入内容智能提示效果

    本文实例讲述了js文本框输入内容智能提示效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 大体思路: 1.监听文本框事件.这里是用的keyup事件.大家可以尝试用onchange事件.不过感觉keyup事件的效果要好一点. 2.根据输入内容通过ajax异步的方式去访问后台数据. 3.遍历返回数据将数据添加到显示区域. 4.在添加数据的同时给每一条数据加上一些效果,点击其中一条将数据填到文本框,并且提示内容消失. 5.后台数据应该拼接成json格式. 具体代码如下: <!DOCTYP

  • js行号显示的文本框实现效果(兼容多种浏览器 )

    js行号显示的文本框实现效果(兼容多种浏览器 )

    利用js打造的一个非常实用简易的文本编辑框,可以显示行号并且同时兼容ie和firefox等主流浏览器,如下效果图: 以下是该效果的源码: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>显示行号的文本框效果,兼容ie.火狐等浏览器</title> <style type=&q

  • js点击文本框后才加载验证码实例代码

    经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的.而是在点击验证码输入框之后才会显示出来验证码的.下面作者也总结了一篇关于如何利用js实现点击文本框然后再加载验证码的效果的. 废话不多说了,下面是具体的实现代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title

  • JavaScript文本框脚本编写的注意事项

    在HTML中,有两种方式来表现文本框: 一种是使用input元素的单行文本,另一种是使用textarea的多行文本框. 使用input方式,必须添加type,设置为"text". size特性,可以指定文本框内能够显示的字符数. value属性可以设置文本框的初始值. maxlength特性则是用于指定文本框内可以接受的最大字符数. textarea的初始值则必须放在开始和结束标签之内. cols是文本框字符行数: rows是文本框字符列数: 另外,不能在HTML中给textarea指

  • js如何实现点击标签文字，文字在文本框出现

    js如何实现点击标签文字，文字在文本框出现

    js实现点击标签文字,文字出现在文本框里,下面2种方法实现的功能略有不同,总体来说方法一功能更强大. 第一种方法:随意点击任何标签都会出现在文本框中,如何第二次点击标签,对应的文字就会在文本框中消失. <style>.c{ width:40px; height:25px; line-height:25px; text-align:left; margin:2px; float:left; font-size:12px; cursor:pointer }</style> <in

  • js判断文本框输入的内容是否为数字

    如何验证文本框中的内容是否为数字,本文提供了三种方法,希望对大家的学习有所启发. 在某些情况下可能需要让文本框中的内容只能够输入数字,例如手机号码或者邮编之类的,下面简单介绍一下如何实现此功能. 下面是验证数字的正则表达式: "^\\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\\d+)|(0+))$" //非正整数(负整数 + 0) "^-[0-9]*[1-9][0-9]

随机推荐