Question

我已经在这上面绞尽脑汁待了几天。我通过许多不同的解决方案看过，但我无法解决这个问题。

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

问题：在文本框中输入搜索字词并点击搜索后，一切都很顺利。但是，当我按下进入搜索时，它只会触发ONCE。单击搜索将继续工作，没有任何问题。

我在这里做错了什么？

＆＃13;

$('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
    }
  });
});

＆＃13;

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

＆＃13;

HTML：

Answer 1

您执行该操作有点不对，而且您的代码需要花费太多开销。没有所有这些keypress事件，您可以实现相同的目标。 submit事件就足够了，它也可以与Enter完美配合！但是，您需要使用form元素包装输入，并将输入类型从button更改为submit：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您要获得用户输入，请始终尝试使用form元素。这使您可以更好地控制输入字段。此外，它在语义上也比孤独的输入更好。尽量避免使用HTML中的内联JavaScript。这只是一种不好的做法。

在＆＃39;输入＆＃39;提交表单使用jQuery只会触发ONCE

1 个答案: