Question

我正在尝试使用以下搜索功能found on Bootsnip。

我希望当我按下回车时这会提交，但它只会在按下选项卡并突出显示搜索按钮或点击按钮时提交。有没有办法改变这个代码，以便按下＆＃34; Enter＆＃34;在键盘上。

以下是代码：

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="input-group custom-search-form">
              <input type="text" class="form-control">
              <span class="input-group-btn">
              <button class="btn btn-default" type="button">
              <span class="glyphicon glyphicon-search"></span>
             </button>
             </span>
             </div><!-- /input-group -->
        </div>
    </div>
</div>

Answer 1

可能需要更多信息才能指出正确的方向。例如，您如何处理实际的搜索逻辑？

但是，我可能会提出一些建议。首先，将输入包装在表单中。将type="button"交换为type="submit"可能会有所帮助。例如：

<form role="search">
    <div class="input-group custom-search-form">
        <input type="text" class="form-control" required="required" aria-required="true" />
            <span class="input-group-btn">
                <button class="btn btn-default" type="submit">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
    </div>
</form>

如果在表单发布时正在处理搜索逻辑，您可能还想在表单上添加操作和/或方法属性。如果搜索逻辑由jQuery处理，那么这应该不重要。

如果你正在寻找一个直接的JS / jQuery答案，这样的东西会有所帮助：

$("input").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        $("form").submit();
    }
});

以下是一些可能有助于此事的Stackoverflow文章：

Submitting a form on 'Enter' with jQuery?

Submitting a form by pressing enter without a submit button

希望这有帮助。

Bootstrap表单提交

1 个答案: