赶上 HTML 形式 "Enter" 按执行 AJAX，而不是 Post

Question

我目前正在处理 HTML 表单（使用 pug 视图引擎构建它），我尝试在填写后在 ajax 请求中使用它。

在编辑我的输入元素后按 Enter 键时，它似乎提交了表单（我想是 post 请求？）。我想让 enter-press 事件（就像我的按钮一样）触发 jquery 函数。

表单构建如下：

form(class="form" action="")
  div(class="form-group")
    label(for="testid") Tickersymbol
    input(name="symbol", type="text", class="form-control", id="testid", placeholder="Please enter the symbol")
   div(class = "form-group")
     button(class="btn btn-primary" id="getdata" type="button") Get Info

当前JQuery代码：

// This does not work
$("#inputStocksymbol").trigger('click', function (){
    console.log("Enter event should have happened.")
})

// This does work
$("#getquote").click( function () {
    console.log("Button has been pressed")
})

有什么建议可以实现吗？

谢谢！

Answer 1

默认情况下，form 的 input 中的 Return 按键将提交该表单。因此，如果您想在发生这种情况时运行一些逻辑挂接到 submit 事件：

$("form.form").on('submit', function(e) {
  e.preventDefault()

  // run your code here

  console.log("Button has been pressed");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form" action="">
  <div class="form-group">
    <label for="testid">Tickersymbol</label>
    <input name="symbol" type="text" class="form-control" id="testid" placeholder="Please enter the symbol" />
    <div class="form-group">
      <button class="btn btn-primary" id="getdata" type="button">Get data</button>
    </div>
  </div>
</form>

或者，如果您只想在输入中按下 Return 时运行一些代码，但不允许按键提交形式，您可以将 keypress 事件处理程序直接挂接到输入，确保调用 stopPropagation():

$("#testid").on('keypress', e => {
  if (e.keyCode === 13) {
    e.preventDefault();
    e.stopPropagation();
    
    // run your code here
    
    console.log("Return has been pressed");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form" action="">
  <div class="form-group">
    <label for="testid">Tickersymbol</label>
    <input name="symbol" type="text" class="form-control" id="testid" placeholder="Please enter the symbol" />
    <div class="form-group">
      <button class="btn btn-primary" id="getdata" type="button">Get data</button>
    </div>
  </div>
</form>

赶上 HTML 形式 "Enter" 按执行 AJAX，而不是 Post

Catch HTML Form "Enter" Press to execute AJAX, not Post

javascript

html

jquery

pug