【前言】
记录一款特效,以后讲课讲解下
【主体】
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery插件——仿新浪微博限制输入字数的textarea</title> <script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script> <style> *{padding: 0;margin: 0;} .box{width: 800px;margin: 0 auto;} #test{border:1px solid #d9d9d9; padding:0 1%;line-height: 1.8;font-family: "microsoft yahei";font-size: 14px;display: block; width: 98%; height: 80px;;} #info{padding: 3px 0;font-family: "microsoft yahei";font-size: 14px;} </style> </head> <body> <div class="box"> <textarea id="test" width="100%"></textarea> </div> <script> (function($) { $.fn.limitTextarea = function(opts) { var defaults = { maxNumber: 140, //允许输入的最大字数 position: 'top', //提示文字的位置,top:文本框上方,bottom:文本框下方 onOk: function() {}, //输入后,字数未超出时调用的函数 onOver: function() {} //输入后,字数超出时调用的函数 } var option = $.extend(defaults, opts); this.each(function() { var _this = $(this); var info = '<div id="info"><b>' + (option.maxNumber - _this.val().length) + '</b>/'+option.maxNumber+'</div>'; var fn = function() { var $info = $('#info'); var extraNumber = option.maxNumber - _this.val().length; if (extraNumber >= 0) { $info.html('<b>' + extraNumber + '</b>/'+option.maxNumber); option.onOk(); } else { $info.html('已经超出<b style="color:red;">' + (-extraNumber) + '</b>个字'); option.onOver(); } }; switch (option.position) { case 'top': _this.before(info); break; case 'bottom': default: _this.after(info); } //绑定输入事件监听器 if (window.addEventListener) { //先执行W3C _this.get(0).addEventListener("input", fn, false); } else { _this.get(0).attachEvent("onpropertychange", fn); } if (window.VBArray && window.addEventListener) { //IE9 _this.get(0).attachEvent("onkeydown", function() { var key = window.event.keyCode; (key == 8 || key == 46) && fn(); //处理回退与删除 }); _this.get(0).attachEvent("oncut", fn); //处理粘贴 } }); } })(jQuery) //插件调用; $(function() { $('#test').limitTextarea({ maxNumber: 140, //最大字数 position: 'bottom', //提示文字的位置,top:文本框上方,bottom:文本框下方 onOk: function() { $('#test').css('background-color', 'white'); }, //输入后,字数未超出时调用的函数 onOver: function() { $('#test').css('background-color', 'lightpink'); } //输入后,字数超出时调用的函数,这里把文本区域的背景变为粉红色 }); }); </script> </body> </html>
相关推荐
jQuery插件charCount模仿twitter和新浪微博的textarea字数统计.zip
jquery新浪发布微博textarea文本框限制文字字数表单 jquery新浪发布微博textarea文本框限制文字字数表单
自从新浪微博开放平台推出以来,各种微博应用层出不穷,作为新浪微博的忠实用户之一,我也曾开发过几个微博应用,对于微博发布应用来说,有一个功能是必不可少的,那就是表情。表情功能的实现虽说不难,但却比较繁琐...
从新浪微博代码里抄的,非常不错,需要的朋友可以参考下。
jQuery textarea文本框输入文字字数限制提示代码,设置固定输入字符,实时计算显示已经输入多少字符。
jQuery textarea文本框输入文字字数限制提示代码,设置固定输入字符,实时计算显示已经输入多少字符。
NULL 博文链接:https://diaoweili.iteye.com/blog/774179
js和jquery分别实现对textarea字数的限制,精彩
jQuery实现仿微博发布框字数提示,主要是运用字符串操作! 效果图: HTML: <textarea name="" id="" cols="30" rows="10"></textarea> 你还可以输入<strong xss=removed>140个字 JQ: $...
通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用。假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为10个字(汉字或其他小角字符): ...
angularjs实现textarea文本输入字数限制功能
自己写的一个小东西 前段时间自己要用在网上下载了一个 不过不好用,自己就写了一个 自我感觉还不错,而且对于限制输入的东西可以根据不同的情况自己修改,方便大家 方便你我他!
jquery实现的关键字高亮插件,简单易用,连textarea中的关键字都可以高亮哦
基于jquery的textarea发布框限制文字字数输入(添加中文识别),需要的朋友可以参考下
主要为大家详细介绍了jQuery编写textarea输入字数限制代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这是一款可为textarea添加行号的jquery插件。该插件可以为普通的textarea文本框在左侧添加一个行号,使用非常简单。