如果输入为空，如何禁用html按钮

我正在使用引导程序中的模式，允许用户在我的网站上发表评论。一切都很好，只是如果输入为null，用户可以发布评论。如果输入为空，我想禁用该按钮

这是引导程序中的按钮模式

<button
type="button"
class="btn btn-dark"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
id="addComment"
>
Add a comment
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add a comment</h5>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Name"
id="name"
aria-describedby="basic-addon1"
/>
</div>
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Comment"
id="comment"
aria-describedby="basic-addon1"
/>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light"
data-bs-dismiss="modal"
>
Cancel
</button>
<button
type="button"
class="btn btn-dark"
data-bs-dismiss="modal"
id="postButton"
onclick="postComment()"
>
Comment
</button>
</div>
</div>
</div>
</div>

我试过什么

我尝试加载Dom，然后将事件侦听器添加到"；添加评论"；按钮并观察输入变化，例如：

document.addEventListener("DOMContentLoaded", () => {
var addbutton = document.getElementById("addComment");
addbutton.addEventListener("click", () => {
var name = document.getElementById("name");
name.addEventListener("change", () => {
if (name.value.length > 0) {
document.getElementById("postButton").disabled = false;
} else {
document.getElementById("postButton").disabled = true;
}
});
});
});

我在谷歌上搜索了bootstrap中是否有一个必填字段，甚至在两个输入中都添加了required，但这并没有奏效。
我也尝试过设置按钮属性disabled并使用上面的代码，但没有使用

我尝试了更多的方法，但都不太奏效。正如我上面提到的，如果输入为null，我需要禁用html按钮。感谢您的帮助。

p.S我首先尝试单个输入，然后我将同时处理两个

当按钮上发生click事件时，您的尝试会在name上设置事件处理程序，并且所有这些都在DOMContentLoaded的处理程序中设置。这可以大大简化。

如果移动script，使其位于关闭的body标记之前，则不需要将代码嵌套在DOMConentLoaded事件处理程序中，因为当解析器到达这一点时，DOM将被加载。接下来，您只需要设置一个blur事件处理程序(当字段失去焦点时触发(或input事件(每当字段的value发生变化时触发(，检查元素是否有内容，并相应地启用/禁用按钮。

这里有一个例子：

<!DOCTYPE html>
<html>
<head>
<title>Enable/Disable submit</title>
</head>
<body>
<input id="one"><input id="two"><button disabled>Submit</button>
<!-- By placing the script just before the closing
body tag, you ensure that all the other elements
have been parsed into memory when the script runs. -->
<script>
const input1 = document.querySelector("#one");  
const input2 = document.querySelector("#two");    
const btn = document.querySelector("button");

// Use the same validation handler for both inputs
input1.addEventListener("input", validate);
input2.addEventListener("input", validate);    

function validate(){
// Check that neither input is empty
if(input1.value === "" || input2.value === ""){
btn.setAttribute("disabled","disabled");
} else {
btn.removeAttribute("disabled");  
}
}    
</script>
</body>
</html>

尝试进行所需的输入

CCD_ 12==><input type="text" required>

然而，它认为，如果有人更改了标签，他们什么也不能输入。在这种情况下，只需检查值为none的帖子，并防止它们被放入数据库中。

这里有一些错误。

在事件监听器中有一个事件监听器

每次单击addbutton时，都会为name分配一个新的事件侦听器，这是多余的。你必须把name.addEventListener移到外面。

let name = document.getElementById("name");
name.addEventListener("input", () => { // Also using `input` instead of `change`
if (name.value.length > 0) {
document.getElementById("postButton").disabled = false;
} else {
document.getElementById("postButton").disabled = true;
}
});

注意到这里也有什么不同吗？我没有使用"change"，而是使用了"input"，因为它实时(当您键入时(进行更改，而"change"在您将注意力集中在输入之外时会被触发。

现在，当加载文档时，您必须禁用该按钮，然后您将被设置。

此外，您可以将脚本放在HTML之后，然后像这样将defer附加到脚本上，而不是使用旧式的onLoad事件侦听器。

<script defer>
// Your Javascript will be executed
// after all the html has been loaded
</script>

let name = document.getElementById("name");
let postButton = document.getElementById("postButton");
postButton.disabled = true;
name.addEventListener("input", () => {
if (name.value.length > 0) {
postButton.disabled = false;
} else {
postButton.disabled = true;
}
});

<button
type="button"
class="btn btn-dark"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
id="addComment"
>
Add a comment
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add a comment</h5>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Name"
id="name"
aria-describedby="basic-addon1"
/>
</div>
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Comment"
id="comment"
aria-describedby="basic-addon1"
/>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light"
data-bs-dismiss="modal"
>
Cancel
</button>
<button
type="button"
class="btn btn-dark"
data-bs-dismiss="modal"
id="postButton"
onclick="postComment()"
>
Comment
</button>
</div>
</div>
</div>
</div>

我试过什么

相关内容

最新更新

热门标签：