学习在js中屏蔽回车自动提交表单的功能,html利用input防止回车提交
warning:
这篇文章距离上次修改已过191天,其中的内容可能已经有所变动。
在HTML中,可以通过在<input>
元素上设置type="text"
和onkeydown
事件处理程序来阻止回车键自动提交表单。以下是一个简单的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止回车自动提交表单</title>
<script>
function preventFormSubmit(event) {
var key = event.keyCode || event.which;
if (key == 13) { // 检查按键是否是回车键
event.preventDefault(); // 阻止默认行为,即回车自动提交表单
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return preventFormSubmit(event)">
<input type="text" onkeydown="return preventFormSubmit(event)" placeholder="按回车将不会提交表单" />
<input type="submit" value="提交" />
</form>
</body>
</html>
在这个示例中,我们定义了一个名为preventFormSubmit
的函数,它检查按下的键是否是回车键(keycode 13)。如果是回车键,它将阻止事件的默认行为,即阻止表单的提交。我们将这个函数作为<input>
元素的onkeydown
事件处理程序,并将表单的onsubmit
事件处理程序设置为这个函数,以确保在任何情况下按下回车键都不会提交表单。
评论已关闭