如何捕获 Enter 按键？ [复制]

Posted 2023-02-22

【中文标题】如何捕获 Enter 按键？ [复制]

【英文标题】：How to capture Enter key press? [duplicate]

【发布时间】：2012-12-08 20:47:18

【问题描述】：

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

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

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>

【问题讨论】：

希望对您有所帮助。 ***.com/questions/9653382/onkeypress-on-a-a-tag

javascript: 不应在 onClick 或 onKeyPress 属性中使用

【参考方案1】：

形式方法

正如 scoota269 所说，您应该改用 onSubmit，因为在文本框上按 Enter 很可能会触发表单提交（如果在表单内）

<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>

【讨论】：

访问 JSFiddle 时出现错误页面

奇怪.. 但是 JS-Fiddle 只针对他的特定场景。答案中的代码示例是主要思想..

您需要将事件作为参数传递。

感谢@TryingToImprove 提出这个想法。

【参考方案2】：

使用 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();
  

这是一个显示它的 sn-p：

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>

【讨论】：

它对我也不起作用可能是什么原因？

抱歉回复晚了。问题是因为在加载窗口时 javascript 还没有准备好。您可以使用 document.ready 函数（jquery）。或在javascript设置中选择“no wrap-in body”下拉选项，它应该可以工作。这是小提琴jsfiddle.net/Ezrwe/35。

【参考方案3】：

试试这个....

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>

【参考方案4】：

你可以使用javascript

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

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

【参考方案5】：

为你准备一点通用的 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 上。在一个页面上处理多个搜索框

【参考方案6】：

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

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

Mozilla Docs

Supported Browsers

【讨论】：

这很有帮助，但目前还不是完整的答案。你能用完整的上下文来充实它吗？

【参考方案7】：

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

【参考方案8】：

	// 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>

【讨论】：

我喜欢你觉得这段非常简单的代码值得归因！

【参考方案9】：

您需要为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 试过，但对我不起作用。 jsfiddle.net/94jsv

【参考方案10】：

<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>

【参考方案11】：

这是简单的 ES-6 风格答案。用于捕获“回车”按键并执行某些功能

<input
    onPressEnter=e => (e.keyCode === 13) && someFunc()
/>