Angular踩坑之二： default button

KenkoTech

已于 2023-12-05 10:39:48 修改

阅读量319

点赞数

分类专栏： Angular 文章标签： angular

于 2021-09-30 10:08:39 首次发布

本文链接：https://blog.csdn.net/KenkoTech/article/details/120522080

版权

Angular 专栏收录该内容

61 篇文章 9 订阅

订阅专栏

按回车触发default button

<!DOCTYPE html>
<html>

<body>
 <form>
  First:<br>
   <input type="text" name="first" value="Kenko">
   <button onclick="change()">button</button>
   <br>
  Last:<br>
   <input type="text" name="last" value="Tech">
   <br><br>
 </form>
 <script>
   function change() {
     alert('button');
  }
 </script>
</body>

</html>

(上图代码的效果)

当在input中敲击回车就会触发它旁边的button，如果一个form表单里有好几个button会导致所有的button同时被触发

无法进行进行下一步的操作

原因如下(参考MDN button type )

type

button的类型。可选值：

submit: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
reset: 此按钮重置所有组件为初始值。
button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。
menu: 此按钮打开一个由指定``元素进行定义的弹出菜单。

解决方法一：阻止input事件冒泡

<!DOCTYPE html>
<html>

<body>
 <form>
  First:<br>
   <input type="text" name="first" value="Kenko" onkeydown="keydown(event)">
   <button onclick="change()">button</button>
   <br>
  Last:<br>
   <input type="text" name="last" value="Tech">
   <br><br>
 </form>
 <script>
   function change() {
     alert('button');
  }
   function keydown(event) {
     if (event.code === 'Enter' || event.code === 'NumpadEnter') {
       event.preventDefault();
    }
  }
 </script>
</body>

</html>

解决方法二：给button加上对应的type