Firefox、Chrome、IE9,IE10均支持oninput事件,此外所有版本的IE均支持onpropertychange事件。
oninput事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl+x)、粘贴(ctrl+v)及鼠标剪切与粘贴时触发(在IE9中只在输入、粘贴、鼠标粘贴时触发)。
onpropertychange事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl+x)、粘贴(ctrl+v)及鼠标剪切与粘贴时触发(在IE9中只在输入、粘贴、鼠标粘贴时触发)(仅IE支持)。
backspace、delete两个按键的keyCode分别为8、46。
oncut事件在粘贴(ctrl+v)、鼠标粘贴时触发。
var input = document.getElementById("test"); function fn() { console.log(input.value.length) // 你要执行的代码 } if (window.addEventListener) { //先执行W3C input.addEventListener("input", fn, false); } else { input.attachEvent("onpropertychange", fn); } if (window.VBArray && window.addEventListener) { //IE9 input.attachEvent("onkeydown", function() { var key = window.event.keyCode; (key == 8 || key == 46) && fn(); //处理回退与删除 }); input.attachEvent("oncut", fn); //处理粘贴 }
在上面的代码中,可以看到,在JS中有oninput这样的事件,文本框的输入、退格、空格、粘贴等操作均能触发,利用这个事件就可以动态捕捉用户的输入情况。记得以前做动态监测输入,都是用onkeydown或onkeyup,太土了,现在直接用这个吧。当代IE的兼容问题已经在上面的代码中解决了,那么我们之接就可以拿来使用了;
利用oninput事件,我们可以开发一款限制textarea字数的插件,像新浪微薄发表微薄的时候,就有字数的限制;
开发这个插件其实相当简单,就是对输入的字数进行一下统计,如果超出了就进行提示,直接看代码:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery插件——仿新浪微博限制输入字数的textarea</title><script src="/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> <textarea></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>还可以输入<b>" + (option.maxNumber - _this.val().length) + "</b>字</div>"; var fn = function() { var $info = $("#info"); var extraNumber = option.maxNumber - _this.val().length; if (extraNumber >= 0) { $info.html("还可以输入<b>" + extraNumber + "</b>个字"); option.onOk(); } else { $info.html("已经超出<b>" + (-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>
使用非常简单,在你要进行限制的textarea上直接调用limitTextarea()方法即可。上面代码中的limitTextarea.js也可以单独存为一个JS文件,页面中引入即可;
demo地址:http://codepen.io/jonechen/pen/RrXqpa;
如果觉得《监听文本框输入开发仿新浪微博限制输入字数的textarea插件》对你有帮助,请点赞、收藏,并留下你的观点哦!