监听文本框输入

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 == || key == ) && 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

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

  1. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  2. 监听文本框输入oninput和onpropertychange事件

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...

  3. js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别

    在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...

  4. IOS NSNotificationCenter(通知 的使用)监听文本框的文字改变

    监听文本框的文字改变 * 一个文本输入框的文字发生改变时,文本输入框会发出一个UITextFieldTextDidChangeNotification通知 * 因此通过监听通知来监听文本输入框的文字改 ...

  5. js监听文本框内容变化

    js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...

  6. 2016-1-6第一个完整APP 私人通讯录的实现 2:增加提示用户的提示框,监听文本框

    一:在登录时弹出提示用户的提示框: 1.使用第三方框架. 2.在登陆按钮点击事件中增加如下代码: - (IBAction)loginBtnClicked { NSString *acount = se ...

  7. 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题

    前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...

  8. vue实现实时监听文本框内容的变化(最后一种为原生js)

    一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. jQuery监听文本框值改变触发事件(propertychange)

    完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

随机推荐

  1. C++ 必知必会:条款15 成员的指针并非指针

    指向类成员的类成员的指针说是“指针”,其实是不合适的,因为他既不包含地址,其行为也不像指针 常规的指正,包含地址,对其解应用可以得到该指针包含地址所指向的对象 1: int a = 12: 2: in ...

  2. box2d 遍历世界中 body 的方法

    大家都知道,循环遍历有很多方法,在box2d中大家普遍使用while和for循环来遍历世界,那什么时候使用for,什么时候使用while呢? 当循环中不设计body删除的时候,使用for循环,即: C ...

  3. JQuery Validate使用总结

    本文参考了  http://www.cnblogs.com/linjiqin/p/3431835.html 可以在mvc 或webform项目中使用,可以方便快捷的对前端表单进行校验 一.导入两个js ...

  4. 学习c的第7天

    #include <stdio.h> int main() { int x=0; if (x==0) { printf("x为假\n"); } else { print ...

  5. 室内净化ThinkPHP复习

    "$_GET[id]"这个是和$_GET['id']一样的 foreach的是 name 和 item if(!empty($_GET['id'])){ $where.= &quo ...

  6. Lua 的函数库 01

    这里只介绍和插件编写比较有关的几个函数. 详细的Lua手册请参照Lua Reference Manual 5.1. table函数库 一部分的table函数只对其数组部分产生影响, 而另一部分则对整个 ...

  7. jQuery基础知识— 获得内容和属性

    jQuery拥有可操作HTML元素和属性的方法. 获得内容: text()--设置或返回所选元素的文本内容 html()--设置或返回所选元素的内容(包括HTML标记) val()--设置或返回表单字 ...

  8. UltraEdit中使用正则表达式

    正则表达式 (UltraEdit Syntax): % 匹配行首 - 表明要搜索的字符串一定在行首. $ 匹配行尾 - 表明要搜索的字符串一定在行尾 ? 匹配除换行符外的任一单个字符. * 匹配任意个 ...

  9. js控制文本框只能输入数字 及 常用字符对应ASCII码值

    方法一: <INPUT TYPE='text' NAME=text onkeypress="a()"><script language=javascript> ...

  10. List GetEnumerator

    static void Main() { List<int> list = new List<int>(); list.Add(); list.Add(); list.Add( ...