Question

我有一个表单，其中包含一个文本框和一个运行jquery / ajax函数的工作提交按钮。我希望在选择文本框并且用户点击“输入”键时运行完全相同的功能。

我已经尝试使文本框运行该函数，但是我使文本输入不再起作用，或者它实际上没有调用该函数（例如，它只是在url中放置一个参数并刷新页面.. 。不是功能的作用）。我怎样才能做到这一点？

这是我的表单代码：

<form style="border: 1px solid;border-radius:5px;" >
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
        <input type="text" class="form-control" id="mytextbox" placeholder="ID #" name="parcel">
        <span class="input-group-btn">
            <button class="btn btn-success" id="btnSearch3" type="button" onclick="foo('parcel',document.getElementsByName('parcel')[0].value,'Wizard')">Search</button>
        </span>
    </div>
</form>

Answer 1

要在表单提交时运行javascript，您可以使用onsubmit

如果您还想阻止以常规方式提交表单，可以使用event.PreventDefault。

我做了一个小提琴，我给了表单一个id并为它创建了一个onsubmit函数。 https://jsfiddle.net/qwza104q/

如果按钮和表单将运行相同的功能，则应移除按钮的onclick并添加type="submit"。

Answer 2

您需要设置文本框以响应按键事件，以便您可以检查输入按键（keyCode 13）。

此外，您不应该使用内联HTML事件处理属性（on...），因为它们：

创建难以阅读并导致代码的意大利面条代码重复。
围绕属性创建全局匿名包装函数更改回调中this绑定的值。
请勿关注 W3C Event Handling standards

改为使用object.addEventListener("eventName", callback)：

＆＃13;

// Get DOM references:
var btn = document.querySelector("#btnSearch3");
var txt = document.querySelector("#mytextbox");
var parcel = document.getElementsByName('parcel')[0];

// Set up event handlers:
btn.addEventListener("click", doFoo);

txt.addEventListener("keypress", function(evt){
  console.log(evt.keyCode);
  // Check for the ENTER key
  if(evt.keyCode === 13){
    doFoo();
  }
});

// General function to be called by both handlers:
function doFoo(){
  console.log("Callback called.");
  //foo('parcel', parcel.value, 'Wizard');
}

＆＃13;

<form style="border: 1px solid;border-radius:5px;" >
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
        <input type="text" class="form-control" id="mytextbox" placeholder="ID #" name="parcel">
        <span class="input-group-btn">
            <button class="btn btn-success" id="btnSearch3" type="button">Search</button>
        </span>
    </div>
</form>

＆＃13;

JavaScript：在所选文本框上设置“输入”键与表单按钮

2 个答案: