在JavaScript中输入按键事件
我有两个文本框，一个选择下拉和一个单选按钮的窗体 。 当按下回车键时，我想调用一个javascript函数（User defined），但是当我按下它时，表单被提交。
当按下回车键时，如何防止提交form ？
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)" />
为了在按下回车键的时候从这个文本框中运行一些“用户自定义”的脚本，而没有提交表单，下面是一些示例代码。 请注意，此功能不会做任何错误检查，并且很可能只会在IE中工作。 要做到这一点，你需要一个更强大的解决方案，但你会得到一般的想法。
function runScript(e) { if (e.keyCode == 13) { var tb = document.getElementById("scriptBox"); eval(tb.value); return false; } }
返回函数的值将提醒事件处理程序不要再冒泡事件，并将防止keypress事件被进一步处理。
同时使用event.which和event.keyCode ：
function (event) { if (event.which == 13 || event.keyCode == 13) { //code to execute here return false; } return true; };
如果你使用jQuery：
$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
覆盖表单的onsubmit动作是对你的函数的调用，并在其后添加返回false，即：
<form onsubmit="javascript:myfunc();return false;" >
检测整个文件上按下的Enter键：
$(document).keypress(function (e) { if (e.which == 13) { alert('enter key is pressed'); } });
一个反应JS解决方案
handleChange: function(e) { if (e.key == 'Enter') { console.log('test'); } <div> <Input type="text" ref = "input" placeholder="hiya" onKeyPress={this.handleChange} /> </div>
一个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(); });
会很高兴得到一个更通用的版本，解雇所有延迟的事件，而不仅仅是表单提交。
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文档
支持的浏览器
下面的代码将在整个页面上为ENTER键添加监听器。
这在单个操作按钮的屏幕上非常有用，例如登录，注册，提交等。
<head> <!--Import jQuery IMPORTANT --> <script src="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>
在所有浏览器上测试。
从我的角度来看，更简单有效的方法应该是：
function onPress_ENTER() { var keyPressed = event.keyCode || event.which; //if ENTER is pressed if(keyPressed==13) { alert('enter pressed'); keyPressed=null; } else { return false; } }
原生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: '08ecc2f68d922f188xxx', client_secret: '5846d428b5340812b76c9637eceaee979340bxxx' } }) .then((user)=>{ console.log(`user = ${user}`); }); fetch(`https://api.github.com/users/${username}/repos`,{ data: { client_id: '08ecc2f68d922f18800e', client_secret: '5846d428b5340812b76c9637eceaee979340b922' } }) .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">
<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>
