执行一次 keyup

Posted

技术标签:

【中文标题】执行一次 keyup【英文标题】:execute keyup once 【发布时间】:2012-06-30 02:37:43 【问题描述】:

当我开始输入文本框时,我正在尝试加载 gif 加载器。我将它附加到包含 keyup 上的文本框的 div 中。我遇到的问题是每次我输入一个字母时都会附加加载器,而我只想在输入第一个字母时附加一次。

function loader()

    $('#contrib_search').bind('keyup', function()
        $('#contrib_text').append('<div id="loader"></div>');
    );

知道怎么做吗? 谢谢

【问题讨论】:

为什么你默认没有加载器display: none 然后在按键上交换类 【参考方案1】:

使用“one”可能会有所帮助:

function loader() 
  $('#contrib_search').one('keyup', function () 
    $('#contrib_text').append('<div id="loader"></div>');
  );

【讨论】:

【参考方案2】:

添加加载器后可以解绑keyup

function loader()

    $('#contrib_search').bind('keyup', function()
        $('#contrib_text').append('<div id="loader"></div>');
        $('#contrib_search').unbind('keyup');  //or $(this).unbind probably a tad faster
    );

【讨论】:

【参考方案3】:

也许这可行:

var pressed = false;
    function loader()

        $('#contrib_search').bind('keyup', function()
            if (pressed == false )
                $('#contrib_text').append('<div id="loader"></div>');
                pressed = true;
            
        );
    

或者不使用这个布尔值,只调用 unbind 而不是我的行,说pressed = true;

【讨论】:

【参考方案4】:

我的建议是将加载器硬编码到您的 html 代码中,然后在 .keyup() 事件处理程序中使用 .show()

然后例如在.blur()事件.hide()它,问题就消失了。

编辑:

var $contrib = $('#contrib_text');

$contrib.bind(
    keyup: function()
       $contrib.find("#loader").show();
    ,
    blur: function()
       $contrib.find("#loader").hide();
    
);

【讨论】:

以上是关于执行一次 keyup的主要内容,如果未能解决你的问题,请参考以下文章

vue中一组件同时绑定了keyup.enter和blur事件,两个事件指向同一个函数,会触发两次的解决方案

MYSQL定时执行事件

数据表专注于搜索,但不是 keyup

记一次vue中自定义组件native的坑

Vue

vbs长按某键