Question

我有以下代码来计算和使用jQuery触发一些函数：

        jQuery('#input_guideName').keyup(function(e)
        {               
            if(this.value.length == 5)
            {
                jQuery("#guide_btnCreateGuide").css({'background-position':'top', 'cursor':'pointer'});
                jQuery("#guide_btnCreateGuide").bind('click', function() {
                    createNewGuide(); 
                });
            }
            else if(this.value.length < 5)
            {
                jQuery("#guide_btnCreateGuide").css({'background-position':'bottom', 'cursor':'default'});
                jQuery("#guide_btnCreateGuide").unbind('click');
            }
        });

以下是我遇到的一些问题：

使用CTRL + V计为2个密钥，代码将运行两次，执行createNewGuide()两次。我该如何避免这种情况？
未检测到使用鼠标右键粘贴代码。我怎么能发现这个？不要把听众放在RightMouseButton上？
如果我粘贴文字＆gt; 5个字符，我的所有功能都没有被触发。我无法在if(this.value.length > 5)上添加控件，因为createNewGuide();会触发每个键盘。

我是如何克服这些问题的？

修改
我的“操作目标”是在DB中创建新指南，指南名称必须至少5个字符。除非名称长度至少为5个字符，否则“创建指南”按钮将无法点击。

Answer 1

我并不真正了解所有代码的优点以及它是如何工作的，但我认为你需要这个：

var thereIsAGuid = false;
jQuery('#input_guideName').bind('keyup mouseup', function(e){
    if(this.value.length >= 5 && thereIsAGuid == false){
        jQuery("#guide_btnCreateGuide").css({'background-position':'top', 'cursor':'pointer'});
        jQuery("#guide_btnCreateGuide").bind('click', function() {
            createNewGuide();
            thereIsAGuid = true;
        });
    } else {
        jQuery("#guide_btnCreateGuide").css({'background-position':'bottom', 'cursor':'default'});
        jQuery("#guide_btnCreateGuide").unbind('click');
        thereIsAGuid = false;
    }
});

我认为

keyup和mouseup事件就足够了。

Answer 2

处理Ctrl + V并不像你想象的那么糟糕，但一般来说处理粘贴是。没有onpaste事件（至少不是跨浏览器），中间/右键点击粘贴实际发生在mouseup事件之后，所以如果你刚刚.bind('change keyup mouseup', func...你就会错过它。鉴于这一切，我认为暂停是最好的方法：

$(function() {
setTimeout(function() {
    var val = jQuery('#input_guideName').val();

    if (val.length > 5) {
        jQuery("#guide_btnCreateGuide")
          .css({'background-position':'top', 'cursor':'pointer'})
          .unbind('click')  // prevents duplicate click events
          .bind('click', function() {
                createNewGuide(); 
          });
    } else {
        jQuery("#guide_btnCreateGuide")
          .css({'background-position':'bottom', 'cursor':'default'})
          .unbind('click');
    }

}, 300);
});

即使在您的原始代码中，createNewGuide()并未在this.value > 5的每个键盘上调用，而是在每个调用createNewGuide的键盘上注册一个新事件，因此在点击时，它会被多次打电话。

在unbind之前执行bind可以防止重复的功能在onclick上被注册，因此即使在ctrl + v上也不会两次调用createNewGuide();

如果您担心用户在短路输入后快速按下按钮，您可以调整延迟。

Answer 3

除了仅处理特定于键盘事件的KeyUp事件外，您还应该考虑绑定到更改事件，它会捕获控件中更改的所有内容吗？

记住Chnage是一个post事件，所以你必须绑定

  $('#input_guideName').bind("change keyup", function() {
       //your code
  });

需要一些关于jQuery和文本框字符数的帮助

3 个答案: