首页 文章

如何捕获Enter键按？

提问于
浏览 次
42

在我的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>
javascript javascript-events textbox keypress onkeypress

12 回答

  • 2

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

    回复于
  • 2

    你可以使用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上 . 在页面上使用多个搜索框进行处理

    回复于
  • 22

    表格方法

    正如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 rusn

            alert("Enter was pressed was presses");
        }
    }
</script>
    回复于
  • 1

    使用 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>
    回复于
  • 75

    试试这个....

    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>
    回复于
  • 3
    // 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>
    回复于
  • 1

    您需要为 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
    }
}
    回复于
  • 2
    <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>
    回复于
  • 6

    容易舔冰淇淋，让我们假设：

    your page before:

    <body>

    your page now:

    <body onkeypress=if(event.keyCode==13)alert('hi')>

    这是一个简单的例子;我假设你的页面有一个简单的正文标签，如果你插入这个单独的onkeypress函数，那就意味着每当你点击ENTER KEY时，警报会弹出[在.keyCode == 13之后使用任何东西]]

    所以用这个替换你的BODY标签并点击ENTER进行测试，你会看到它正常工作

    回复于
  • -1

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

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

    Mozilla Docs

    Supported Browsers

    回复于
  • 0

    根据MDN不推荐使用此功能已从Web标准中删除 . 虽然有些浏览器可能仍然支持它，但它正在被删除 . 如果可能，请避免使用它并更新现有代码;请参阅本页底部的兼容性表格，以指导您的决定 . 请注意，此功能可能随时停止运行 .

    但是，如果您真的想使用它并需要一个值，请转到http://keycode.info/

    回复于

相关问题