我有一个带有两个文本框的表单,一个选择下拉框和一个单选按钮。当按下enter键时,我想调用JavaScript函数,但当我按下它时,表单就提交了。

当按下回车键时,如何防止表单被提交?


当前回答

使用TypeScript,避免多次调用该函数

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}

其他回答

jQuery解决方案。

我来这里寻找一种方法来延迟表单提交,直到文本输入上的模糊事件被触发。

$(selector).keyup(function(e){
  /*
   * Delay the enter key form submit till after the hidden
   * input is updated.
   */

  // No need to do anything if it's not the enter key
  // Also only e.which is needed as this is the jQuery event object.
  if (e.which !== 13) {
       return;
  }

  // Prevent form submit
  e.preventDefault();

  // Trigger the blur event.
  this.blur();

  // Submit the form.
  $(e.target).closest('form').submit();
});

最好能有一个更通用的版本,可以触发所有延迟事件,而不仅仅是表单提交。

if(characterCode == 13) {
    // returning false will prevent the event from bubbling up.
    return false; 
} else{
    return true;
}

好的,想象一下你在表单中有以下文本框:

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

为了在按enter键时从这个文本框运行一些“用户定义的”脚本,而不是让它提交表单,下面是一些示例代码。请注意,这个函数不做任何错误检查,很可能只在IE中工作。要做到这一点,您需要一个更健壮的解决方案,但您将得到大致的想法。

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

返回函数的值将提醒事件处理程序不要进一步冒泡事件,并将防止进一步处理按键事件。

注意:

已经指出keyCode现在已弃用。退而求其次的选择也被弃用了。

不幸的是,被现代浏览器广泛支持的标准键在IE和Edge中存在一些不可靠的行为。任何比IE11更老的东西仍然需要填充。

此外,虽然弃用的警告是相当不祥的keyCode和,删除这些将代表一个巨大的突破性的变化,无数的遗留网站。出于这个原因,他们不太可能很快离开任何地方。

整个文档按下回车键:

$(document).keypress(function (e) {
    if (e.which == 13) {
        alert('enter key is pressed');
    }
});

http://jsfiddle.net/umerqureshi/dcjsa08n/3/

重写表单的onsubmit动作,调用你的函数,并在后面添加return false,即:

<form onsubmit="javascript:myfunc();return false;" >

使用两个事件。which和event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};