在JavaScript中输入按键事件


330

我有一个form带有两个文本框,一个选择下拉菜单和一个单选按钮。当enter按下该键时,我想调用一个Javascript函数(用户定义),但是当我按下它时,将提交表单。

按下键form时如何防止提交enter

Answers:


445
if(characterCode == 13)
{
    return false; // returning false will prevent the event from bubbling up.
}
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;
    }
}

返回该函数的值将警告事件处理程序不要再使事件冒泡,并且将防止进一步处理keypress事件。

注意:

它已经指出,keyCode现在已经过时。下一个最好的替代which已经也被弃用

不幸的key是,受现代浏览器广泛支持的受人喜爱的标准在IE和Edge中具有某些躲避行为。任何比IE11都旧的版本仍需要使用polyfill

此外,尽管已过时的警告对于keyCode和都是不祥的警告which,但删除这些警告将意味着对无数旧网站的巨大突破。因此,他们不太可能很快就去任何地方。


4
用户定义到底是什么意思?例如,用户在文本框中键入一些脚本,然后使用Eval()运行它?
乔什

1
是否可以使用PreventDefualt?

12
@ Stuart.Sklinar-在用户输入到浏览器中的输入上进行评估时,与其在Chrome / FF / IE中打开命令控制台并自己输入脚本相比,他们没有更多的控制权。他们唯一可以伤害的人就是他们自己……除非您当然没有在服务器上强制执行安全性。完全是另一个问题。
2012年

1
@SteelBrain-再次,给某人一个文本框,他们可以在其中键入eval内容,然后按一下按钮的内容与打开开发人员工具并执行该操作一样。如果这是要保存到数据库中并可以由ANOTHER用户打开的东西,那将是一件大事,但这是一个完全独立于此小片段的问题。
2015年


137

同时使用event.whichevent.keyCode

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

11
为什么同时使用event.which和event.keyCode?
亚历克斯·斯普林

35
一些浏览器支持which其他支持keyCode。最好将两者都包括在内。
user568109 2013年

还可以使用keydown事件代替keyuporkeypress
manish_s 2014年

@Agiagnoc但这应该附加到什么事件?
Don Cheadle

2
@manish,按键比键下/上键给您更多的信息。stackoverflow.com/a/9905293/322537
Hermann Ingjaldsson

78

如果您使用的是jQuery:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});

1
我无法使它正常工作。该处理程序preventDefault至少会在Chrome中触发,但似乎并未停止提交表单。
德鲁·诺阿克斯

19
您必须使用keydown事件而不是keyup:$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
Petar Donchev Marinov 2012年

2
提交后会触发keyup,因此无法将其取消。
Pierre-Olivier Vares 2014年

keyup和keypress都对我有用。我去了按键。谢谢!
markiyanm 2014年

'keydown'是正确的,正如其他评论者所说的那样。由于尚未更改,因此我将更新答案。我使用了这个答案,并停留了一段时间,直到我回来查看评论。
马特·K

71

event.key ===“ Enter”

最近更新,更清洁:使用event.key没有更多的任意数字代码!

const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        // Do more work
    }
});

Mozilla文件

支持的浏览器


在寻找这个。在$ event的控制台日志中看到了key属性。认为它可能更可靠
tatsu

这不仅是宏还是别名?使用此代码在性能方面有什么好处?
clockw0rk

1
keyCode不推荐使用。这是不是在你的代码中的魔法整数可读性和可维护性
Gibolt


17

onsubmit将表单的操作覆盖为对函数的调用,并在其后添加return false,即:

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

我无法覆盖onsubmit,因为我在此页面中还有其他表单提交
Shyju,2009年

5
是的你可以。Javascript是基于原型的语言。document.forms [“ form_name”]。onsubmit = fucntion(){}
the_drow,2009年

提交表单时,我还有另一个删除程序要运行。所以我想保持原样
Shyju,2009年

17

React JS解决方案

 handleChange: function(e) {
    if (e.key == 'Enter') {
      console.log('test');
    }


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>

9

因此,也许最好的解决方案是覆盖尽可能多的浏览器并成为未来的证明。

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")

6

如果您想使用纯Java脚本来执行此操作,那么这是一个完美运行的示例

假设这是您的html文件

<!DOCTYPE html>
<html>
  <body style="width: 500px">
    <input type="text" id="textSearch"/> 
      <script type="text/javascript" src="public/js/popup.js"></script>
  </body>
</html>

在您的popup.js文件中,只需使用此功能

var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        alert("yes it works,I'm happy ");
    }
});

5

下面的代码将为添加监听器 ENTER在整个页面上键的。

这在具有单个“动作”按钮的屏幕中非常有用,例如“登录”,“注册”,“提交”等。

<head>
        <!--Import jQuery IMPORTANT -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

         <!--Listen to Enter key event-->
        <script type="text/javascript">

            $(document).keypress(function (e) {
                if (e.which == 13 || event.keyCode == 13) {
                    alert('enter key is pressed');
                }
            });
        </script>
    </head>

在所有浏览器上测试。


3

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();
});

得到一个能触发所有延迟事件而不只是表单提交的更通用的版本将是很好的。


3

在我看来,一种更简单有效的方法应该是:

function onPress_ENTER()
{
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}

2

使用TypeScript,并避免对该函数进行多次调用

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

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

这个问题已有八年多了。那时打字稿不存在。所以您确定您没有回答其他问题吗?
Nico Haase

2

有点简单

不要在“ Enter”键上发送表单:

<form id="form_cdb" onsubmit="return false">

在按键“ Enter”上执行该功能:

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">

1

本机js(获取api)

document.onload = (() => {
    alert('ok');
    let keyListener = document.querySelector('#searchUser');
    // 
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let username = e.target.value;
            console.log(`username = ${username}`);
            fetch(`https://api.github.com/users/${username}`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((user)=>{
                console.log(`user = ${user}`);
            });
            fetch(`https://api.github.com/users/${username}/repos`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((repos)=>{
                console.log(`repos = ${repos}`);
                for (let i = 0; i < repos.length; i++) {
                     console.log(`repos ${i}  = ${repos[i]}`);
                }
            });
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();
<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">


为什么在这里包含了client_id等?代码合法吗?
eddyparkinson


0
<div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
                <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
            <input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
        </form>

</div>

<script type="text/javascript">
    $("#search_value").on('keydown', function(e) {
        if (e.which == 13) {
             $("#search").trigger('click');
            return false;
        }
    });
    $("#search").on('click',function(){
        alert('You press enter');
    });
</script>

0

跨浏览器解决方案

一些较旧的浏览器以非标准方式实现按键事件。

KeyBoardEvent.key是应该在现代浏览器中实现的方式。

whichkeyCode已被弃用,但是仍然可以检查这些事件,因此该代码适用于仍使用IE等旧版浏览器的用户。

isKeyPressed功能检查是否输入了按下的键并event.preventDefault()阻止了表单的提交。

  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }

最小的工作实例

JS

function isKeyPressed(event, expectedKey, expectedCode) {
  const code = event.which || event.keyCode;

  if (expectedKey === event.key || code === expectedCode) {
    return true;
  }
  return false;
}

document.getElementById('myInput').addEventListener('keydown', function(event) {
  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }
});

的HTML

<form>
  <input id="myInput">
</form>

https://jsfiddle.net/tobiobeck/z13dh5r2/

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.