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

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

我目前正在处理 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")
})

有什么建议可以实现吗?

谢谢!

默认情况下,forminput 中的 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>