form 表单 input 敲击回车冒泡会触发附近button的click事件
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
form 表单 input 敲击回车冒泡会触发附近button的click事件
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<button onclick="changeText('button')">button</button>
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<script>
function changeText(str) {
alert(str);
}
</script>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
</body>
</html>
原因：button 对象的 type 属性有 submit、button、reset 三种类型，默认是 submit。所以不加 type="button" 的时候回车当做 submit 调用。
解决办法一：监听 input 的 keydown 事件，如果是键盘回车键按下，则阻止默认事件
增加
function keydown(event) {
if(event.key === 'Enter'){
event.preventDefault();
}
}
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp" οnsubmit="return false;">
First name:<br>
<input type="text" name="firstname" value="Mickey" onkeydown="keydown(event)">
<button onclick="changeText('button')">button</button>
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<script>
function changeText(str) {
alert(str);
}
function keydown(event) {
if(event.key === 'Enter'){
event.preventDefault();
}
}
</script>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
</body>
</html>解决办法二： 给button加上type="button"
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<button type="button" onclick="changeText('button')">button</button>
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<script>
function changeText(str) {
alert(str);
}
</script>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
</body>
</html>
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |