在JavaScript中输入键按事件
https://stackoverflow.com/questions/905222
-
05-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我有一个 form 有两个文本框，一个 选择 下降和一个 单选按钮. 。当。。。的时候 进入 按下键，我想调用JavaScript函数（用户定义），但是当我按下它时，将提交表单。
我如何防止 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)" />
为了在按下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 是 现在弃用了. 。下一个最好的选择 which 有 也被弃用.
不幸的是最喜欢的标准 key, ，它得到了现代浏览器的广泛支持，有一些 IE和Edge的狡猾行为. 。比IE11年龄较大的任何东西仍然需要一个 多填充.
此外，虽然弃用的警告是不祥的 keyCode 和 which, ，将其删除将代表大量的破坏变化，以实现无数的旧网站。是因为， 他们不太可能很快去任何地方。
其他提示
两者都使用 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();
}
});
检测整个文档上按下Enter键：
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
覆盖 onsubmit 表格的操作是对您的函数的调用，并在其之后添加返回false，即：
<form onsubmit="javascript:myfunc();return false;" >
React JS解决方案
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>
如果您想使用纯粹的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 ");
}
});
下面的代码将添加侦听器 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>
对所有浏览器进行了测试。
因此，也许最好的解决方案可以覆盖尽可能多的浏览器，并将来证明将是
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
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();
});
很高兴获得更通用的版本，该版本发射了所有延迟事件，而不仅仅是表格提交。
从我的角度来看，一种简单和有效的方法应该是：
function onPress_ENTER()
{
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
alert('enter pressed');
keyPressed=null;
}
else
{
return false;
}
}
使用Typescript，并避免在功能上调用倍数
let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;
function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}
本地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">有点简单
不要在按键“ Enter”上发送表格：
<form id="form_cdb" onsubmit="return false">
在按键“ Enter”上执行功能：
<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
<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>
此功能 preventKey() 不论弃用浏览器功能如何。
这三个属性中只有一个 which （弃用）， keyCode （弃用）或 key （IE中的问题）必须存在。
https://jsfiddle.net/tobiobeck/z13dh5r2/
JS
function preventKey(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 (preventKey(event, 'Enter', 13)) {
event.preventDefault();
}
});
html
<form>
<input id="myInput">
</form>
浏览器测试
如果您想测试不同的浏览器手动评论或删除以下三个 event.something 线：
var event = {};
event.which = 13;
//event.keyCode = 13;
//event.key = 'Enter'
if (preventKey(event, 'Enter', 13)) {
console.log('enter was pressed');
}
不隶属于 StackOverflow
