监听文本框输入

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. Python网络编码

    #-*- coding:utf-8 -*- from SocketServer import ThreadingTCPServer, StreamRequestHandler import trace ...

  2. rpm软件包

    安装软件:rpm -i software.rpm卸载软件:rpm -e software升级形式安装:rpm -U software-new.rpmrpm支持通过http.ftp协议安装软件:rpm ...

  3. ASP.NET MVC5 高级编程 第2章 控制器

    参考资料<ASP.NET MVC5 高级编程>第5版 第2章 控制器 控制器:响应用户的HTTP 请求,并将处理的信息返回给浏览器. 2.1 ASP.NET MVC 简介 MVC 模式中的 ...

  4. 解决phpcms图片太大撑破表格图片自适应图片按比例缩小

    img,a img{ border:0; margin:0; padding:0; max-width:590px; width:expression(this.width590?590px:this ...

  5. [原创] 初识Agile/CMMI/Scrum

    一.背景介绍 在朋友(aehyok)的建议下,初步去了解Visual Studio Online,简称VS Online(即原来的 Team Foundation Service,简称TFS) VS ...

  6. TFS build dotCover StyleCop

    FS2010 – Customizing the Build Details View – Summary View http://blogs.msdn.com/b/jpricket/archive/ ...

  7. mysql 根据生日计算年龄，并查询在18-25之间的语句

    select id, DATE_FORMAT(birthday,"%Y-%m-%d") birthday, CURDATE() , (year(now())-year(birthd ...

  8. 取消界面的title

    在setContentView(R.layout.activity_main)方法上面添加代码(继承Activity的写法): requestWindowFeature(Window.FEATURE_ ...

  9. Android图表

    最近需要用到Android里面的折现图,因此在这方面也去做了一些调研.总体发现Android对报表的支持还是非常好的.总体上去研究了两个实现方案,一个是利用Android提供的的AChartEngin ...

  10. Delphi的"Invalid pointer operation"异常的解决办法

    今天用Delphi编写了个dll,用到了TStringList来传递多参数,如下: [delphi] view plaincopy 01.function DBM_SetParam(procName: ...