jQuery 监听修改文本框事件

最新推荐文章于 2024-07-14 03:36:05 发布

应该是林冬

最新推荐文章于 2024-07-14 03:36:05 发布

阅读量1.3w

点赞数 4

分类专栏： javascript 文章标签： Jquery js mvc 浏览器

javascript 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

在开发中，有时我们需要对 input 的 value 值变化作实时响应。比如文本输入框的实时字数统计功能，要求文本框内容改变时就要触发相关的统计行为。不管这个内容是键盘输入的，还是鼠标粘贴进来的。

1，实现原理
要实现内容实时监听响应，我们需要用到两个监听事件： oninput 事件和 propertychange 事件
（1） oninput
这个是标准浏览器的事件，一般浏览器都支持。当 input 的 value 发生变化时就会发生，无论是键盘输入还是鼠标粘贴的改变都能即时监听到。

（2） propertychange
由于 IE9 以下是不支持的 oninput 事件。这个时候就要用到IE专有的 propertychange 事件。顾名思义，翻译过来叫属性变更事件。这个事件就比较强大了，不仅仅会监听到 input 的 value 属性，还包括其他的标签属性。各种属性发生变化都会产生该事件，比如 span 元素的 style 属性改变。同时在事件发生时还可以用 event.propertyName 访问到改变的属性名。

2，样例演示
下面使用 jQuery 做一个字数实时统计功能。当文本框内容改变时，下方会实时统计出当前的字数。

 
        <html> 
       
        <head> 
       
        <title>hangge.com</title> 
       
        <meta charset= 
        "utf-8" 
        /> 
       
        <script type= 
        "text/javascript"  
        src= 
        "jquery-1.11.1.min.js" 
        ></script> 
       
        <script> 
       
        $(document).ready( 
        function 
        (){ 
       
        $( 
        '#comment' 
        ).on( 
        'input propertychange' 
        ,  
        function 
        () { 
       
        var  
        count = $( 
        this 
        ).val().length; 
       
        $( 
        '#tip' 
        ).html( 
        "已输入 " 
        + count + 
        " 个字。" 
        ); 
       
        }); 
       
        }); 
       
        </script> 
       
        </head> 
       
        <body> 
       
        <textarea id= 
        "comment"  
        rows= 
        "5"  
        cols= 
        "50" 
        ></textarea> 
       
        <br> 
       
        <div id= 
        "tip" 
        ></div> 
       
        </body> 
       
        </html>

原文出自： www.hangge.com 转载请保留原文链接： http://www.hangge.com/blog/cache/detail_1378.html

应该是林冬

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery 监听修改文本框事件

在开发中，有时我们需要对 input 的 value 值变化作实时响应。比如文本输入框的实时字数统计功能，要求文本框内容改变时就要触发相关的统计行为。不管这个内容是键盘输入的，还是鼠标粘贴进来的。1，实现原理要实现内容实时监听响应，我们需要用到两个监听事件：oninput 事件和 propertychange 事件（1）oninput这个是标准浏览器的事件，一般浏览器都支持。当
复制链接

扫一扫

专栏目录