在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.whichevent.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'); } }); 

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

    一个反应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="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> 

    在所有浏览器上测试。

    从我的角度来看,更简单有效的方法应该是:

     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>