使按钮在按下时单击

to make the button clicked when enter pressed

本文关键字：单击 按钮      更新时间：2023-09-26

这是我的代码：

<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(）。

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

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

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")
    }    
});
将

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

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

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

将输入元素移动到<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属性。

相关文章：