JavaScript禁用按钮
kaifeiji.cc
·
2023-07-25
·
via 开飞机的老张
原文：Disable a Button in JavaScript
如何用原生JavaScript禁用一个按钮。
在JavaScript中，button元素可以设置一个disabled属性，来阻止点击按钮。例如，一个点击弹出alert的按钮：
1
2
3
4
5
6
| <button id="my-alert-button">Show Alert</button>
<script>
document.querySelector('#my-alert-button').addEventListener('click', function() {
alert('Clicked on button!');
});
</script>
|
以下是该按钮的实例。
静态博客无法显示，请查看原文
如果按钮设置了disabled属性，点击按钮不会发生任何事。
1
2
3
4
5
6
7
8
| <button id="my-alert-button">Disabled Button</button>
<script>
document.querySelector('#my-alert-button').addEventListener('click', function() {
alert('Clicked on button!');
});
document.querySelector('#my-alert-button').disabled = true;
</script>
|
静态博客无法显示，请查看原文
表单
按钮也可以用来提交表单。例如，点击以下按钮会触发my-form的submit事件。在输入框聚焦状态按回车也可以提交表单。
1
2
3
4
5
6
7
8
9
10
| <form id="my-form">
<input type="text" placeholder="Sample Input">
<button type="submit">Submit Form</button>
</form>
<script>
document.querySelector('#my-form').addEventListener('submit', function(ev) {
ev.preventDefault();
alert('Form submitted!');
});
</script>
|
静态博客无法显示，请查看原文
如果禁用了按钮，就相当于禁用了表单的提交。当点击按钮时不会触发my-form的submit事件，在input聚焦状态按回车也不会。
1
2
3
4
5
6
7
8
9
10
11
| <form id="my-form">
<input type="text" placeholder="Sample Input">
<button type="submit">Submit Form</button>
</form>
<script>
document.querySelector('#my-form').addEventListener('submit', function(ev) {
ev.preventDefault();
alert('Form submitted!');
});
document.querySelector('#my-form button').disabled = true;
</script>
|
静态博客无法显示，请查看原文
本教程对您有帮助吗？来GitHub仓库点个星支持我们吧！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。
