【问题标题】:JQuery change not firing until blurJQuery 更改直到模糊才会触发
【发布时间】:2012-04-22 17:47:23
【问题描述】:

我使用change(handler)来监听一个textarea的change事件,但是我只在textarea失去焦点的时候接收到一个事件,但是我想在值发生变化的时候马上接收到一个事件。

$("#text_object").change(listener);
function listener(dom){
alert("I'm not getting here before the textarea loses focus");
}

【问题讨论】:

标签: jquery


【解决方案1】:

根据这里的正确答案Javascript change event on input element fires on only losing focus

你应该这样做

$('#name').on('change textInput input', function () {
       
});

但是我发现同时拥有 textInput 和 input 事件会导致事件触发两次,你不希望这样,所以就这样做

$('#name').on('change input', function () { ...

【讨论】:

    【解决方案2】:

    不幸的是,浏览器仅在字段模糊时才能识别更改,因此您可能想尝试附加一个 keyup 侦听器。不幸的是,这不是最优雅的解决方案。

    详情请见http://api.jquery.com/keyup/

    【讨论】:

    • 当使用 keyup 时,您可以使用鼠标粘贴文本而不会触发事件。
    • 因为这是最受好评并被接受的:请务必查看 Slim Fadi 的答案,其中提到了 input 事件,这正是您想要的。
    【解决方案3】:

    你可以这样做。只要确保你给 textarea 一个 id 标签

    $(document).ready(function(){
            $('.addtitle').keyup(function(event) {
                if(event.keyCode==13) { 
    
    }
    });
    });
    

    在我的例子中,我在 Enter 键上触发该功能(如 facebooks 功能)。

    编辑:如果你在一个页面上有多个文本区域,你应该这样做:

    $(document).ready(function(){
            $('textarea[name=mynamevalue]').keyup(function(event) {
                if(event.keyCode==13) { 
    
    }
    });
    });
    

    【讨论】:

      【解决方案4】:

      这是我的工作:

      /* Get the current value of the input and save it 
       *  in a data attribute before any change is made to it */
      $(document).on('keydown','input', function(){
         $(this).data('value',$(this).val());
      });
      
      /* Compare the values after the keyup event*/
      $(document).on('keyup','input', function(){
        if($(this).data('value') != $(this).val()){
          console.log($(this).attr('name'));
        }
      });
      

      所以“keydown”事件是在按键实际对其调用的元素进行任何修改之前触发的,“keyup”是在触发之后触发的。 所以我获取之前的值并比较之后的新值,然后如果有变化我会做任何我必须做的事情..

      希望对你有帮助

      【讨论】:

        【解决方案5】:

        您可以在每次按键后强制模糊,以便立即有效地完成更改检查。

        $myselector.on('change', function() { /*do something*/ });
        $myselector.on('keyup', function() { $(this).blur(); $(this).focus(); });
        

        【讨论】:

          【解决方案6】:

          您可以在输入焦点事件中setInterval() 并在模糊中清除此间隔以及您的相关功能我认为这是自己捕捉输入变化的好方法。

          例子:

          var myInterval;
          $("#text_object").focus(function (event) {
              myInterval = setInterval(function () {            
                  listener(event);
              }, 100);
          });
          
          $("#text_object").blur(function (event) {
              clearInterval(myInterval);
          });
          
          function listener(event){
              clearInterval(myInterval);
          
              alert("I'm not getting here before the textarea loses focus");
          }
          

          希望对你有帮助。

          【讨论】:

            【解决方案7】:

            我为你创建了这个,它不是最优雅的解决方案,但它有效

            JS:

            <script>
            $(document).ready(function (d) {
            
                /* set initial value to "" (empty string), and not null
                   we're going to use this to check if the value of the current text field has been changed */
                val = '';
            
                setInterval(function () {
                    if (val !== $('textarea[name="checktext"]').val()) {
            
                        // Value is not the same, fire action
                        alert('val is different');
            
                        // Update the current value
                        val = $('textarea[name="checktext"]').val();
                    } else {
                        // Val is the same as textarea value
                    }
            
                }, 50);
            
            });
            </script>
            

            HTML:

            <textarea name="checktext"></textarea>
            

            此脚本仅适用于该特定文本区域,您可以更改它,也可以将 val 设置为文本输入数组。

            我只是向您展示它背后的想法,使用 x 毫秒的 setInterval 来检查文本输入的值是否与 val 的值或您的任何变量名称相同想用。如果它们不匹配,则表示已更改,如果匹配,则表示没有任何更改。

            我希望你觉得这很有用。

            不过HTML5有解决办法

            <script>
            $(document).ready(function (d) {
            
                $('textarea[name="checktext"]').on('input', function () {
                    alert('changed');
                });
            });
            </script>
            

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 2021-03-01
              • 1970-01-01
              • 2018-06-02
              • 2019-09-22
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多