如何捕捉回车键按下事件？

Question

如何捕捉回车键按下事件？

javascripttextboxkeypressdom-eventsonkeypress

71

在我的HTML页面中，我有一个用于用户输入搜索关键词的文本框。当他们点击搜索按钮时，JavaScript函数将生成URL并在新窗口中运行。

当用户通过鼠标单击搜索按钮时，JavaScript函数能够正常工作，但是当用户按下“回车”键时没有反应。

function searching(){
    var keywordsStr = document.getElementById('keywords').value;
    var cmd ="http://XXX/advancedsearch_result.asp?language=ENG&+"+ encodeURI(keywordsStr) + "&x=11&y=4";
    window.location = cmd;
}

<form name="form1" method="get">
    <input name="keywords" type="text" id="keywords" size="50" >
    <input type="submit" name="btn_search" id="btn_search" value="Search" 
        onClick="javascript:searching(); return false;" onKeyPress="javascript:searching(); return false;">
    <input type="reset" name="btn_reset" id="btn_reset" value="Reset">
</form>

- Joe Yan

希望这能对你有所帮助。http://stackoverflow.com/questions/9653382/onkeypress-on-a-a-tag - Prasad Rajapaksha

JavaScript不应该在onClick或onKeyPress属性中使用。 - TryingToImprove

11个回答

39

使用 onkeypress 。检查按下的键是否为回车（keyCode = 13）。如果是，则调用 searching() 函数。

HTML

<input name="keywords" type="text" id="keywords" size="50"  onkeypress="handleKeyPress(event)">

JavaScript

function handleKeyPress(e){
 var key=e.keyCode || e.which;
  if (key==13){
     searching();
  }
}

这里是一个展示其工作原理的代码片段：

document.getElementById("msg1").innerHTML = "Default";
function handle(e){
 document.getElementById("msg1").innerHTML = "Trigger";
 var key=e.keyCode || e.which;
  if (key==13){
     document.getElementById("msg1").innerHTML = "HELLO!";
  }
}

<input type="text" name="box22" value="please" onkeypress="handle(event)"/>
<div id="msg1"></div>

- bipen

它对我也没有起作用，可能是什么原因？ - Sameer Sawla

抱歉回复晚了。问题是因为在窗口加载时javascript还没有准备好。您可以使用document.ready函数（jquery的），或在javascript设置中选择“无包装正文”下拉选项，它应该能工作。这是jsfiddle链接：http://jsfiddle.net/Ezrwe/35/。 - bipen

12

使用event.key而不是event.keyCode！

function onEvent(event) {
    if (event.key === "Enter") {
        // Submit form
    }
};

Mozilla 文档

支持的浏览器

- Gibolt

1

这很有帮助，但目前不是完整的答案。你能否提供完整的上下文来解释一下？ - bob

1

@bob，event.keyCode已经被弃用，现在建议使用event.key。 - Mike Sallese

7

尝试这个...

HTML内联

onKeydown="Javascript: if (event.keyCode==13) fnsearch();"
or
onkeypress="Javascript: if (event.keyCode==13) fnsearch();"

JavaScript

<script>
function fnsearch()
{
   alert('you press enter');
}
</script>

- Rahul Dadhich

5

你可以使用 JavaScript。

ctl.attachEvent('onkeydown', function(event) {

        try {
            if (event.keyCode == 13) {
                FieldValueChanged(ctl.id, ctl.value);
            }
            false;
        } catch (e) { };
        return true
    })

- user2753926

4

这里有一点关于通用的jQuery的小技巧。

$('div.search-box input[type=text]').on('keydown', function (e) {
    if (e.which == 13) {
        $(this).parent().find('input[type=submit]').trigger('click');
        return false;
     }
});

这个前提是文本框和提交按钮被包含在同一个 div 中。在页面上使用多个搜索框时非常有效。

- Andy - CodeRemedy

2

你需要为 onkeypress 操作创建一个处理程序。 HTML

<input name="keywords" type="text" id="keywords" size="50" onkeypress="handleEnter(this, event)" />

JS

function handleEnter(inField, e)
{
    var charCode;

    //Get key code (support for all browsers)
    if(e && e.which)
    {
        charCode = e.which;
    }
    else if(window.event)
    {
        e = window.event;
        charCode = e.keyCode;
    }

    if(charCode == 13)
    {
       //Call your submit function
    }
}

- ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

我在 JSFiddle 上尝试了一下，但对我来说没有用。http://jsfiddle.net/94jsv/ - Seanny123

1

请在表单标签上使用onsubmit属性，而不是在提交按钮上使用onclick。

- scottlimmer

1

 // jquery press check by Abdelhamed Mohamed


    $(document).ready(function(){
    $("textarea").keydown(function(event){
        if (event.keyCode == 13) {
         // do something here
         alert("You Pres Enter");
        }
       });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <textarea></textarea>

- Abdelhamed Mohamed

1

我很喜欢你觉得这个非常简单的代码片段值得归属的事实！ - Liam

0

<form action="#">
    <input type="text" id="txtBox" name="txt" onkeypress="handle" />
</form>






<script>
    $("#txtBox").keypress(function (e) {
            if (e.keyCode === 13) {
                alert("Enter was pressed was presses");
            }

            return false;
        });

    </script>

- choudhury smrutiranjan parida

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TryingToImprove · Accepted Answer

表单提交方式

正如scoota269所说，应该使用onSubmit，因为在文本框中按下回车键时，最可能会触发表单提交（如果存在表单）。

<form action="#" onsubmit="handle">
    <input type="text" name="txt" />
</form>

<script>
    function handle(e){
        e.preventDefault(); // Otherwise the form will be submitted

        alert("FORM WAS SUBMITTED");
    }
</script>

文本框方法

如果您想在输入字段上触发事件，则需要确保您的handle()函数将返回false，否则表单将被提交。

<form action="#">
    <input type="text" name="txt" onkeypress="handle(event)" />
</form>

<script>
    function handle(e){
        if(e.keyCode === 13){
            e.preventDefault(); // Ensure it is only this code that runs

            alert("Enter was pressed was presses");
        }
    }
</script>