代码之家  ›  专栏  ›  技术社区  ›  quakkels

如何使用jQuery防止空格键进入空格?

  •  14
  • quakkels  · 技术社区  · 14 年前

    我认为在表单输入中劫持空格键是一件简单的事情,这样它就可以像连字符一样工作。一般来说,jQuery让这样的事情变得非常简单。

    我试过的代码是:

            $("#StreamUrl").keydown(function (e) {
                if (e.keyCode == 32) return 109;
            });
    

    但这没有任何效果。我尝试了一个更简单的脚本:

            $("#StreamUrl").keydown(function (e) {
                //if (e.keyCode == 32) return 109;
                alert(e.keyCode);
            });
    

    此脚本正确地在空格键上警告32,在连字符键上警告109。而且,我没有JavaScript错误。

    为什么不呢 if (e.keyCode == 32) return 109; if (e.keyCode == 32) alert("space!!"); 我得到的警报是正确的,所以我知道 if 他回来了 true 正确地。

    编辑-解决方案

    感谢@Nick指出复制粘贴问题。最后我变成了一个混血儿。下面的代码,我已经得到了工作,这是既顺利和处理复制/粘贴。

            $("#StreamUrl").keydown(function (e) {
                if (e.keyCode == 32) {
                    $(this).val($(this).val() + "-"); // append '-' to input
                    return false; // return false to prevent space from being added
                }
            }).change(function (e) {
                $(this).val(function (i, v) { return v.replace(/ /g, "-"); }); 
            });
    
    2 回复  |  直到 14 年前
        1
  •  21
  •   Cristian Sanchez    14 年前

    问题是 return 109 不会做你想做的事。在事件处理程序中,根据是否希望浏览器执行默认操作,返回true或false。在 keydown

    $("#StreamUrl").keydown(function (e) {
         if (e.keyCode == 32) { 
           $(this).val($(this).val() + "-"); // append '-' to input
           return false; // return false to prevent space from being added
         }
    });
    

    jsfiddle example

        2
  •  11
  •   Nick Craver    14 年前

    你呢 通常 想要那个吗 keyup 而是在这里触发 之后 添加了空间,类似这样的内容更简单:

    $("#StreamUrl").bind("keyup change", function () {
      $(this).val(function(i, v) { return v.replace(/ /g,"-"); });
    });
    

    Try it out here .val() . 对于较旧版本的jQuery,它如下所示:

    $("#StreamUrl").bind("keyup change", function () {
      $(this).val($(this).val().replace(/ /g,"-"));
    });
    

    这甚至适用于粘贴内容的人,这是一种轻松的方法 keydown 验证。