按下 enter 时单击按钮答案

【问题标题】：to make the button clicked when enter pressed按下 enter 时单击按钮
【发布时间】：2015-01-20 14:42:52
【问题描述】：

这是我的代码：

<select name="category" id="category">
             <option value="select" selected="selected" style="display:none;">--Select Search Category--</option>
      <option value="Title">Book Title</option>
      <option value="Subtitle">Book Subtitle</option>
      <option value="BookAccessNumber">Book Access Number</option>
      <option value="Author">Author</option>
      <option value="Publisher">Publisher</option>

    </select> 
            <input type="text" name="keyword" value="" id="keyword" />
             <input type="button" value="Search" onClick="display(category.value,keyword.value)">
              <br/><br/>
              <div id="show_result">
              </div>

在我的代码中，我得到了一些输入值，一个来自组合框，另一个来自文本框，我有一个名为搜索的按钮。我所做的是，如果我点击按钮，它将调用一个名为display()的java脚本函数，用于显示搜索结果。

但我将事件设置为 onClick，因此它仅在我单击按钮时才有效。当我按回车时它不起作用。我需要做的是，让函数display() 被调用，即使我也点击了“enter”。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你可以调用显示方法检查这个jsfiddle：

$("input").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        alert("call display method");
        display();
    }
});

【讨论】：

【解决方案2】：

http://jsfiddle.net/naeemshaikh27/cy84t4pz/1/

使用 jquery 触发器

function display(){
alert('hellow btn clicked');
}

$('.addButton').on('click', display);

$('body').on('keypress','input', function(e){
if (e.keyCode == 13) {
      $('.addButton').trigger("click")
    }    
});

【讨论】：

【解决方案3】：

将您的输入元素包装在form 中，并将onclick 处理程序移动到表单的onsubmit 处理程序。

<form onsubmit="alert('foo'); return false;">
    <input type="text" />
    <input type="submit" />
</form>

【讨论】：

这在按钮单击和输入按下时都不起作用。任何其他答案请
但是我需要在onsubmit 中调用一个函数，如果我这样做的话它不起作用

【解决方案4】：

 <input type="button" value="Search" onClick="display(category.value,keyword.value)" onKeyDown="if(arguments[0].KeyCode==13){display(category.value,keyword.value)}">

【讨论】：

在 onKeyDown 中是否可以访问事件参数？
这不起作用..它仅在按钮单击时起作用，而不是在输入时起作用

【解决方案5】：

将您的输入元素移动到<form> 并将您的<input type="button"> 更改为<input type="submit">。表单会将按下Enter 键视为单击Submit 按钮。因此，表单将被处理。

试试这个：

<form onsubmit="display(category.value,keyword.value)">
    <select name="category" id="category">
        <option value="select" selected="selected" style="display:none;">--Select Search Category--</option>
        <option value="Title">Book Title</option>
        <option value="Subtitle">Book Subtitle</option>
        <option value="BookAccessNumber">Book Access Number</option>
        <option value="Author">Author</option>
        <option value="Publisher">Publisher</option>
    </select> 
    <input type="text" name="keyword" value="" id="keyword" />
    <input type="submit" value="Search" />
</form>
<br/><br/>
<div id="show_result">
</div>

请注意display(category.value,keyword.value) 被移动到form 的onsubmit 属性。

【讨论】：