使用jQuery在“Enter”上提交表单只触发一次

Question

我已经绞尽脑汁想了几天了。我研究过许多不同的解决方案，但我想不出这一点。

我在PHP页面中有一个简单的表单，带有文本框和搜索按钮，一旦执行搜索，输入的文本就会在文档中突出显示。

PROBLEM：在文本框中输入搜索词和CLICKing搜索之后，一切都很好。然而，当我按enter搜索时，它只会触发一次。单击搜索将继续工作，没有任何问题。

我在这里做错什么了？

​

$('document').ready(function() {
  $('#button').click(function() {
    var search = $('#text-search').val();
  });
  $('#text-search').keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == 13) { //Enter key pressed
      $('#button').on(); //Trigger search button click event
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search" class="Column">
  <input name="text-search" id="text-search" type="text" size="20" maxlength="30" placeholder="search & highlight">
  <input name="searchit" id="button" type="button" value="Search" onClick="highlight()">
</div>

​

HTML：

Answer 1

您这样做有点不对，并且给代码增加了太多开销。在没有所有这些keypress事件的情况下，您可以实现同样的目标。submit事件就足够了，它与Enter一起完美地工作！但是，您需要使用form元素包装输入，并将输入类型从button更改为submit。

​

var searchbox = document.querySelector('#text-search')
var searchForm = document.querySelector('#search')

searchForm.addEventListener('submit', function(e) {
  e.preventDefault()
  highlight(searchbox.value)
  searchForm.reset()
})

function highlight(value) {
  // do something with your value
  alert(value)
}

<form id="search" class="Column">
  <input name="text-search" id="text-search" type="text" size="20" maxlength="30" placeholder="search & highlight" />
  <input name="searchit" id="button" type="submit" value="Search" />
</form>

​

如果您获得用户输入，请始终尝试使用form元素。这使您能够更好地控制输入字段。而且，它在语义上比这里和那里的孤独输入更好。尽量避免HTML中的内联javascript。这只是个糟糕的练习。