jQuery按键工作正常，除按回车外

jQuery keypress to work normally except hitting enter

本文关键字：回车 工作 jQuery      更新时间：2023-09-26

如果在input标签内按enter键，我想触发click，但希望在所有其他情况下使用默认事件策略。我试过这样做:

$("#keywords").keypress(function(e) {
    if (e.charCode === 13) {
        $("#campus-search").click();
    } else {
        $("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
    }
});

它工作，但我仍然不满意，因为当我点击input内部某处在文本或按下左键，或home键，然后尝试键入一些文本，它会在输入结束时显示它，这是糟糕的用户体验。除了按enter的情况外，我可以保持input以默认方式工作吗?

我想你要找的是这个:

$(document).ready(function () {
    $("#test").keyup(function (event) {
        if (event.keyCode == 13) {
            $("#campus-search").click();
        }
    });
    $("#campus-search").click(function () {
        console.log("BUTTON IS CLICKED");
    });
});

input将完全正常和一切工作在default， 除非当你按下回车键(keyCode = 13)，然后按钮.click()事件将被触发。

工作小提琴:http://jsfiddle.net/Mz2g8/3/

,

# Update:对于你的问题中的代码只是一个提示，请不要使用charCode，因为已弃用。

此功能已从Web中删除。尽管一些浏览器可能仍然支持它，但它正在被放弃。不要在旧的或新的项目中使用它。使用它的网页或Web应用程序可能随时崩溃。

(如。charCode不支持FF v29.0.1)

和一些不同但重要的要知道的事情:

charCode never在keydown和keyup事件中设置。在这些情况下，设置keyCode。

来源:https://developer.mozilla.org/en-US/docs/Web/API/event.charCode

应该可以了

$("#keywords").keypress(function(e) {
if (e.charCode === 13) {
    e.preventDefault(); // prevent default action of the event if the event is keypress of enter key
    $("#campus-search").click();
} else {
    $("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
}
});

我认为你可以完全取消else子句来获得你想要的结果。

keypress函数不捕获非打印键，例如shift、esc、delete和enter，因此最好的方法是有两个事件处理程序:一个用于keypress，正如您在上面定义的那样，另一个用于keydown，检查charCode 13，然后在$(#campus-search)上执行click()事件，如果传递了该键码(通过enter按)。

这就是你要找的:

HTML: 

<input id="keywords" type="text" value="" />
<input id="campus-search" type="button" value="Campus Search" />
JavaScript/jQuery: 
$("#keywords").keypress(function (e) {
    if (e.charCode === 13) {
        $("#campus-search").click();
    } else {
        $("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
    }
});
$("#campus-search").on("click", function () {
    alert("Searching..");
});

现场演示

相关文章：