Question

我试图在我点击搜索图标时显示一个搜索框，当前问题是当它出现时它也会提交搜索。如何让搜索框显示但不提交搜索框，只有在搜索框中输入内容并点击提交时才会显而易见。

CoInitialize

Answer 1

如果表单中未定义button，则submit会被视为type按钮。如果您不想提交表单，请使用<button type="button">。

如果单击按钮，这将告诉浏览器不提交表单。或者，如果输入命中，您可以使用JavaScript来阻止提交表单。

Answer 2

你有几个问题。首先，您应该向type="button"添加button属性，以阻止其提交表单。然后，您应该将事件处理程序附加到按钮，而不是其中的图标。最后，您需要确保jQuery包含在您的页面中，因为它不是小提琴的一部分。试试这个：

$('.search-button').click(function() {
  $('.search input').toggle();
});

.search input {
  background-color: #FDFDFC;
  background-color: rgba(255, 255, 255, .9);
  box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, .14);
  font-weight: 400;
  font-size: .9em;
  padding: .8em 1em .7em;
  color: #252424;
}
.search input {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="search" method="post" action="/search">
  <input type="text" name="criteria" placeholder="Search Box">
  <button type="button" class="search-button">
    <i class="icons icon-search" aria-hidden="true"></i>  <span class="sr">Search Box</span>
  </button>
</form>

单击时出现带有Jquery的搜索输入框，但不提交

2 个答案: