如何在表单中禁用输入按钮
How to disable enter button in a form?
我有这个HTML表单:
<head>
<title>log in</title>
</head>
<body>
<form action="login.php" method="POST">
user name : <input type="text" name="user"> <br>
user pass : <input type="password" name="pass"> <br>
<input type="submit" value="submit">
</form>
</body>
我想使表单只能通过单击按钮提交 - 而不是按 Enter 键。我该怎么做?
对此
有很多解决方案。这是最简单的方法之一:
<html>
<head>
<title>log in</title>
</head>
<body>
<form action="login.php" method="POST" onsubmit="return false;">
user name : <input type="text" name="user"> <br>
user pass : <input type="password" name="pass"> <br>
<input type="button" value="submit" onclick="this.parentNode.submit();">
</form>
</body>
</html>
演示:http://jsfiddle.net/EFDZ2/
这是最适合我的:
<input id="input_id" type="text">
<script>
// prevent the enter key from submitting the form if input_id has focus to prevent accidental submission
document.getElementById('input_id').addEventListener('keypress', function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
</script>
只是为了补充 VisioN 的答案,在某些情况下,输入可能不是表单的直接子级,因此在这些情况下,只需将表单引用为this.form
即可。
<html>
<head>
<title>log in</title>
</head>
<body>
<form action="login.php" method="POST" onsubmit="return false;">
user name : <input type="text" name="user"> <br>
user pass : <input type="password" name="pass"> <br>
<div>
<input type="button" value="submit" onclick="this.form.submit();">
</div>
</form>
</body>
</html>
将以下脚本添加到页面的部分。
<script type="text/javascript">
function stopRKey(evt)
{
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement)?evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text"))
{
return false;
}
}
document.onkeypress = stopRKey;
</script>
$(document).ready(function() {
function checkKey(e) {
if (e.keyCode == 13) {
if (!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
}
$("input").keydown(checkKey);
})
这应该适用于所有浏览器。它需要JQuery来让生活更简单。演示:http://jsfiddle.net/WDvvY/
事实上,我认为答案比这更简单。如果您不希望 Enter 键导致提交,请不要在表单中使用"提交"类型的按钮或输入。onsubmit="return false;"没有为我做任何事情。火狐 27 和 IE 11。
相关文章:
- 更改输入按钮's onClick参数
- 通过提示中的循环触发iFrame中的输入按钮(JavaScript)
- 将 CSS 应用于禁用的输入按钮
- 仅对一个输入按钮禁用应用
- 不显示为表单元素的图像输入按钮的动态创建和appendChild
- 如果未选中复选框,则禁用引导输入按钮
- 如果从文件输入按钮调用 .ajaxSubmit() 时,它是必需的表单
- JavaScript - 输入按钮隐藏 - 不起作用
- 输入按钮分隔显示按钮名称和值
- 单击列表中的引导输入按钮将禁用其他按钮
- javascript的事件监听器将下拉列表转换为输入按钮
- 表单验证和提交时提交文本&输入按钮上带有验证的图像
- JQuery-防止表单在输入按钮上提交,out防止按键敲击
- 如何使用javascript移除/隐藏、更改输入按钮的标题
- 检查输入按钮
- 每当我按下输入框内的键盘输入按钮(其中有文本)时,都会出现新的段落
- 每当在文本区域上输入按钮时,都会触发按钮
- 如果 e.keyCode 是“输入”按钮,并且元素包含其他文本,则验证条件
- 单击输入按钮时更新文本区域内容
- 如何显示输入按钮并关闭当前窗口