您的位置：首页 > 其它

监听文本框输入开发仿新浪微博限制输入字数的textarea插件

2016-02-24 17:56 495 查看

监听文本框输入

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="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>字</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 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>


使用非常简单，在你要进行限制的textarea上直接调用limitTextarea()方法即可。上面代码中的limitTextarea.js也可以单独存为一个JS文件，页面中引入即可；

demo地址：http://codepen.io/jonechen/pen/RrXqpa；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航