(1)     先说jquery, 使用 jQuery 库的话，只需要同时绑定
oninput 和 onpropertychange 两个事件就可以了，示例代码：

$('#username').bind('input
propertychange', function() {
    $('#content').html($(this).val().length
+ ' characters');
});



(2)　
对于JS原生写法而言， oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password
和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下：

　　

　　从上面表格可以看出，oninput 事件在
IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：

  • 修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
  • 修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
  • 修改了 select 元素的选中项，selectedIndex 属性发生变化。

　　在监听到 onpropertychange 事件后，可以使用
event 的 propertyName 属性来获取发生变化的属性名称。

　　集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下：

 
 <head>

<script type="text/javascript">

    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9

        function OnInput (event) {

            alert ("The new content: " + event.target.value);

        }

    // Internet Explorer

        function OnPropChanged (event) {

            if (event.propertyName.toLowerCase () == "value") {

                alert ("The new content: " + event.srcElement.value);

            }

        }

    </script>

</head>

<body>

    Please modify the contents of the text field.

    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

</body>

http://blog.163.com/lgh_2002/blog/static/44017526201341511112874/

最新文章

  1. ASP.NET Core 中文文档 第二章 指南（4.10）检查自动生成的Detail方法和Delete方法
  2. 手把手教你搭建Hive Web环境
  3. MEF入门之不求甚解，但力求简单能讲明白(四)
  4. .Net Framework 4.0 内部排序探索
  5. Jquery-获取父级元素parent
  6. C++命名空间
  7. js性能优化的小知识
  8. 6.理解DispatcherServlet
  9. [前端引用] 利用ajax实现类似php include require 等命令的功能
  10. Makefile学习与进阶之Makefile.am和$$(M)的意思
  11. usaco 奶牛接力
  12. Cmake编译成静态库
  13. Rabbitmq集群高可用部署详细
  14. 我的日志文件java logger
  15. 剑指Offer——全排列递归思路
  16. mysql-入门
  17. Github page搭建博客使用自定义插件的方法
  18. 面试 15：顺时针从外往里打印数字（剑指 Offer 第 20 题）
  19. java中级——集合框架【1】-ArrayList
  20. nodejs点滴

热门文章

  1. elixir 高可用系列（四） Task
  2. Connect教程系列--响应式布局(一)
  3. UI创意求助：手机贪吃蛇游戏方向控制键设计
  4. 《JavaScript语言精粹》学习笔记
  5. node-webkit教程(8)Platform Service之Clipboard
  6. 从源代码的角度聊聊java中StringBuffer、StringBuilder、String中的字符串拼接
  7. JavaScript中的property和attribute
  8. C++ 关联容器
  9. SpringMVC文件上传实现
  10. TF Boys (TensorFlow Boys ) 养成记（四）