0

我知道 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>

提前致谢！！

4

1 回答 1

3

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

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

http://jsfiddle.net/YCatZ/

于 2013-06-11T05:20:19.300 回答