Shy*_*yju 304 javascript forms enter keypress dom-events
我有form两个文本框,一个选择下拉菜单和一个单选按钮.当enter按下键时,我想调用一个javascript函数(用户定义),但是当我按下它时,表单就会被提交.
如何form在enter按下键时阻止提交？
Jos*_*osh 413
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;
}
}
返回函数的值将提醒事件处理程序不要再进一步冒泡事件,并将阻止进一步处理keypress事件.
它已经指出,keyCode在现在已经过时.下一个最好的替代which已经也被弃用.
不幸的key是,现代浏览器广泛支持的优惠标准在IE和Edge中有一些狡猾的行为.比IE11更旧的东西仍然需要填充.
此外,虽然弃用的警告是非常不祥的,keyCode并且which删除那些将代表对无数遗留网站的巨大突破性变化.出于这个原因,他们不太可能很快就会去任何地方.
Agi*_*noc 130
使用event.which和event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
cow*_*boy 74
如果你正在使用jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
Gib*_*olt 56
更新,更清洁:使用event.key.没有更多的任意数字代码!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});
ume*_*mer 21
检测按下整个文档的Enter键:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
http://jsfiddle.net/umerqureshi/dcjsa08n/3/
rpk*_*lly 17
覆盖onsubmit表单的操作以调用您的函数并在其后添加返回false,即:
<form onsubmit="javascript:myfunc();return false;" >
caf*_*ipt 15
一个反应js解决方案
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>
因此，也许最好的解决方案是覆盖尽可能多的浏览器并成为未来的证明。
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
如果您想使用纯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>
在所有浏览器上测试过.
| 归档时间： |
|
| 查看次数： |
1027888 次 |
| 最近记录： |