如何检测用户何时在input字段中按Enter键
我只有1个input字段,我想注册onChange和onKeyPress事件来检测用户何时完成input或按Enter键。 我只需要使用JavaScript。 谢谢您的帮助。
我有:
var load = function (){ //I want to trigger this function when user hit Enter key. } document.getElementById('co').onchange=load; //works great document.getElementById('co').onKeyPress=load; //not sure how to detect when user press Enter
HTML
//no form just a single input field <input type='text' id='co'>
document.getElementById('foo').onkeypress = function(e){ if (!e) e = window.event; var keyCode = e.keyCode || e.which; if (keyCode == '13'){ // Enter pressed return false; } }
DEMO
为了使其跨浏览器:
document.getElementById('foo').onkeypress = function(e) { var event = e || window.event; var charCode = event.which || event.keyCode; if ( charCode == '13' ) { // Enter pressed return false; } }
看到这个问题的更多细节: JavaScript事件e.which?
使用event.keyCode
var code = (e.keyCode ? e.keyCode : e.which); if(code == 13) { //Enter keycode //Do something }
这个链接已经有一个讨论jQuery Event Keypress:哪个键被按下了?
这些答案都没有专门回答这个问题。 问题在于两部分。 1.input被按下。 2.用途集中于input。
$('#input-id').on("keyup", function(e) { if (e.keyCode == 13) { console.log('Enter'); } });
这种方式ENTER只有当用户按下inputFROM时才被检测到。
这里有一个很好的链接,讨论这个话题,并提供了一个工作的例子
function DetectEnterPressed(e) { var characterCode if(e && e.which){ // NN4 specific code e = e characterCode = e.which } else { e = event characterCode = e.keyCode // IE specific code } if (characterCode == 13) return true // Enter key is 13 else return false }
我使用这个代码,它工作正常:
document.getElementById("theIdHere").onkeypressed = function() { if(this.event.which === 13) console('passed'); }
更新和更清洁:使用event.key
而不是event.keyCode
。 没有更多的任意数字代码!
const node = document.getElementById('co'); node.addEventListener('keydown', function onEvent(event) { if (event.key === "Enter") { return false; } });
Mozilla文档
支持的浏览器
- 在Firebase的Cloud Functions中从数据库中获取用户标识?
- 在服务器上调用Collection.insert时,“Meteor代码必须始终在Fibre中运行”
- 你可以强制Vue.js重新加载/重新渲染?
- 为什么我的JavaScript regex.test()给交替结果
- 新的线上的JavaScript括号?
- 如何使用JavaScript将图像转换为base64string
- JavaScript嵌套function
- 有没有一种很好的方法将JavaScript对象附加到HTML元素?
- 使用ES6发电机的Reduce-saga与使用ES2017asynchronous/等待的redux-thunk的优点/缺点