Question

我知道jQuery不支持oninput事件，所以我自己开始编写一个插件来完成这项工作。虽然不能很好地理解与jQuery或JavaScript中的事件相关的所有内容，但我最终得到了可用的代码，这些代码目前满足了我的要求。

不幸的是，我认为我当前的实现可能会崩溃，特别是在与其他库结合使用时，因为我直接设置了DOM元素的oninput成员。

您是否知道一种更好，更便携的方法来解决这个问题，可能使用jQuery的“on”或JavaScript“addEventListener”等方法？

这是我正在使用的代码的一个工作示例：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script type="text/javascript">

////////////////////////////////////////////////////////////////////////////
// jQuery plugin to bind an event handler to the "oninput" JavaScript event.
(function ($) {

   // Add an "input" method to all jQuery objects
   $.fn.input = function (handler) {

      // iterate over all DOM elements in the jQuery object
      this.each( function () {
         // set a new method to run when "oninput" is fired
         this.oninput = function (prevHandler) {
            return function (ev) {
               // call previous handler if exists
               if( typeof prevHandler === 'function' ) {
                  prevHandler.call (this, ev);
               }
               // call new handler
               handler.call (this, ev);
            };
         }(this.oninput);  // immediate evaluation, pass current handler as argument
      });
   };
} (jQuery));
////////////////////////////////////////////////////////////////////////////
</script>

<script type="text/javascript">
// Test the plugin
$(document).ready (function () {
   $('#one').input (function () {
      alert ('Input on one: ' + $(this).val());
   });
   $('#three,#four').input (function () {
      alert ('Input on three or four: ' + $(this).val());
   });
   $('#one,#two,#three').input (function () {
      alert ('Input on one, two, or three: ' + $(this).val());
   });
   $('#one,#two,#three,#four').input (function () {
      alert ('Input on any: ' + $(this).val());
   });
});
</script>

</head>

<body>
<input id='one'/><br/>
<input id='two'/><br/>
<input id='three'/><br/>
<input id='four'/><br/>
</body>

</html>

提前致谢!!

Answer 1

jQuery＆＃39; on＆＃39;可以处理任何事件，所以你可以简单地做这样的事情：

(function() {
    var outputElement = document.getElementById('mirror-input');
    $('#input-stuff').on('input', function (event) {
        outputElement.innerText = event.target.value; 
    });
}())

http://jsfiddle.net/YCAtZ/

用于绑定JavaScript的oninput事件的最佳jQuery插件实现

1 个答案: