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

Question

我认为在表单输入时劫持空格键是一件简单的事情，这样它就可以像连字符一样起作用。一般来说，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, "-"); }); 
        });

Answer 1

问题是return 109 没有做你想让它做的事情。在事件处理程序中，您返回 true 或 false 取决于您是否希望浏览器执行默认操作。在keydown 中，您将返回 false 以防止字符被插入。

$("#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

Answer 2

您通常希望在此处使用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 验证的简单方法。