我有form
个文本框,一个选择下拉菜单和一个单选按钮。当按下 enter 键时,我想调用一个javascript函数(用户自定义),但是当我按下它时,表单就会被提交。
如果在按下 输入 键时阻止提交form
?
答案 0 :(得分:387)
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) {
//See notes about 'which' and 'key'
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}
返回函数的值将提醒事件处理程序不要再进一步冒泡事件,并防止按键事件被进一步处理。
有人指出keyCode
是now deprecated。下一个最佳替代which
有also been deprecated。
不幸的是,现代浏览器广泛支持的优惠标准key
有一些dodgy behavior in IE and Edge。比IE11更旧的东西仍然需要polyfill。
此外,虽然已弃用的警告对keyCode
和which
非常不利,但删除这些警告将代表对无数遗留网站的巨大改变。出于这个原因,他们不太可能很快就会去任何地方。
答案 1 :(得分:121)
同时使用event.which
和event.keyCode
:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
答案 2 :(得分:71)
如果你正在使用jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
答案 3 :(得分:44)
更新,更清洁:使用event.key
。 不再有任意数字代码!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});
答案 4 :(得分:18)
检测按下整个文档的Enter键:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
答案 5 :(得分:17)
覆盖表单的onsubmit
操作以调用您的函数,并在其后添加return false,即:
<form onsubmit="javascript:myfunc();return false;" >
答案 6 :(得分:13)
反应解决方案
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>
答案 7 :(得分: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>
在所有浏览器上测试过。
答案 8 :(得分:5)
如果你想使用purly 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 ");
}
});
答案 9 :(得分: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();
});
很高兴获得一个更通用的版本来解决所有延迟事件,而不仅仅是表单提交。
答案 10 :(得分:2)
从我的角度来看,一个更简单有效的方法应该是:
function onPress_ENTER()
{
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
alert('enter pressed');
keyPressed=null;
}
else
{
return false;
}
}
答案 11 :(得分:2)
使用TypeScript,并避免对函数进行多次调用
let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;
function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}
答案 12 :(得分:1)
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">
答案 13 :(得分:1)
因此,可能覆盖尽可能多的浏览器并成为未来证明的最佳解决方案是
Year Month speciality_id speciality_name
2018 1 1 Acupuncturist
2018 1 2 Andrologist
2018 1 3 Anaesthesiologist
2018 1 4 Audiologist
2018 1 5 Ayurvedic Doctor
2018 1 6 Biochemist
2018 1 7 Biophysicist
2018 2 1 Acupuncturist
2018 2 2 Andrologist
2018 2 3 Anaesthesiologist
2018 2 4 Audiologist
2018 2 5 Ayurvedic Doctor
2018 2 6 Biochemist
2018 2 7 Biophysicist
答案 14 :(得分: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>
答案 15 :(得分:0)
不要在“ Enter”键上发送表单:
<form id="form_cdb" onsubmit="return false">
执行按键时 “回车” 功能:
<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
答案 16 :(得分:0)
此功能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');
}
答案 17 :(得分:0)
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">
在您的HTML页面中添加此代码...将禁用...输入按钮。
答案 18 :(得分:0)
在用户定义的函数中使用event.preventDefault()
<form onsubmit="userFunction(event)"> ...
function userFunction(ev)
{
if(!event.target.send.checked)
{
console.log('form NOT submit on "Enter" key')
ev.preventDefault();
}
}
Open chrome console> network tab to see
<form onsubmit="userFunction(event)" action="/test.txt">
<input placeholder="type and press Enter" /><br>
<input type="checkbox" name="send" /> submit on enter
</form>