关于javascript：如何捕获Enter键按？


How to capture Enter key press?

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

当用户通过鼠标单击搜索按钮时，JavaScript函数可正常工作，但当用户按下ENTER键时没有响应。

1
2
3
4
5
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;
}
1
2
3
4
5
6
<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>
相关讨论

形式方法

正如scoota269所说，你应该使用onSubmit代替，因为在文本框上按下输入将最像是触发表单提交(如果在表单内)

1
2
3
4
5
6
7
8
9
10
<form action="#" onsubmit="handle">
    <input type="text" name="txt" />
</form>


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

        alert("FORM WAS SUBMITTED");
    }

文本框方法

如果你想在输入字段上有一个事件，那么你需要确保你的handle()将返回false，否则表单将被提交。

1
2
3
4
5
6
7
8
9
10
11
12
<form action="#">
    <input type="text" name="txt" onkeypress="handle(event)" />
</form>


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

            alert("Enter was pressed was presses");
        }
    }
相关讨论

使用onkeypress。检查按下的键是否输入(keyCode = 13)。如果是，请调用searching()函数。

HTML

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

JAVASCRIPT

1
2
3
4
5
6
function handleKeyPress(e){
 var key=e.keyCode || e.which;
  if (key==13){
     searching();
  }
}

这是一个显示它在行动的片段：

1
2
3
4
5
6
7
8
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!";
  }
}
1
<input type="text" name="box22" value="please" onkeypress="handle(event)"/>

相关讨论

试试这个....

HTML内联

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

JavaScript的

1
2
3
4
function fnsearch()
{
   alert('you press enter');
}

你可以使用javascript

1
2
3
4
5
6
7
8
9
10
ctl.attachEvent('onkeydown', function(event) {

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

一点点通用jQuery给你..

1
2
3
4
5
6
$('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上。在页面上使用多个搜索框进行处理

使用event.key代替event.keyCode！

1
2
3
4
5
function onEvent(event) {
    if (event.key ==="Enter") {
        // Submit form
    }
};

Mozilla文档

支持的浏览器

1
2
3
4
5
6
7
8
9
10
11
    // jquery press check by Abdelhamed Mohamed


    $(document).ready(function(){
    $("textarea").keydown(function(event){
        if (event.keyCode == 13) {
         // do something here
         alert("You Pres Enter");
        }
       });
    });
1
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    <textarea></textarea>

相关讨论

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

HTML

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

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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
    }
}
相关讨论

在表单标记上使用onsubmit属性而不是在提交上单击。

这是简单的ES-6风格的答案。用于捕获"输入"键按下并执行某些功能

1
2
3
<input
    onPressEnter={e => (e.keyCode === 13) && someFunc()}
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form action="#">
    <input type="text" id="txtBox" name="txt" onkeypress="handle" />
</form>







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

            return false;
        });