当输入框聚焦时，在按下回车键时调用函数的Bootstrap输入字段。

Question

我在Bootstrap中有一个输入组，包括一个图标、一个文本框和一个按钮。为了提高用户界面体验，我希望回车键只有在文本框处于焦点状态时才能调用与搜索按钮相关联的函数。

这是否可以使用原生Bootstrap实现，还是需要使用某种形式的jQuery？我不希望回车键被永久地用于激活此功能，只有当用户使用此输入搜索字段时才需要。

谢谢您的帮助。

<div class="form-group">
  <label class="control-label" for="another-location">Search for another location</label>

  <div class="input-group">
    <div class="input-group-addon" data-toggle="tooltip" data-placement="right" title="Location"><span class="fa fa-map-marker fa-fw"></span></div>
    <input type="text" class="form-control gllpSearchField" id="another-location" placeholder="A location" name="another-location" />

    <span class="input-group-btn">
      <button class="btn btn-default" type="button">Search</button>
    </span>                             
  </div>
</div>

- user3779703

---

这些是否在实际的“表单”内？如果是这样，为什么不将按钮设置为type="submit"的“input”呢？然后按下回车键会触发表单提交。任何搜索功能都将依附于表单的“提交”事件。您能展示其余的HTML吗？Q： “附加到搜索按钮的函数”在哪里？ - iCollect.it Ltd

谢谢回复。这是一个表单，但有一个整体提交按钮，这只是表单的一部分，如果用户与此字段交互，则执行Google地图搜索，因此页面底部有一个整体提交按钮以更新所有详细信息。关于函数，我在按钮类上有一个ID，它通过jquery onclick事件触发。这是很多代码，但基本上涉及在googlemaps中查找地址并显示标记。我所关心的是，如果在引导程序中聚焦了一个字段，按返回键可以调用一个函数。感谢您的帮助。 - user3779703

Answer 1

是的，你需要使用jQuery：

$('#another-location').keypress(function(event){
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13'){
           alert('You pressed a "enter" key in textbox, here submit your form'); 
        }
    });

- Raymond

---

嗨，雷蒙德，感谢您的回复并确认了我的想法 - 我不确定是否有更简洁的方法让Bootstrap自动知道字段和组中的按钮是链接的，因此输入键会自动绑定。感谢您提供的代码示例，我现在将尝试使用它。 - user3779703

使用 $(this).parent().find('button').click(); 来点击按钮。 - Cobote

感谢您在按钮点击方面的额外提示，Cobote。 - user3779703