如何解决删除输入内容后,表格中的必填字段不会变为红色
基本表单验证
在此问题中,您将确保文本框不为空。完成以下步骤:
创建一个文本输入框。 编写一个将文本框的边框更改为红色的函数。
(如果值等于“”,则为空)。
如果该值不为空,则边框应恢复正常。
let form = document.getElementById("form_Text").value;
document.getElementById("form_Text").onfocus = function() {
if (form == "") {
document.getElementById("form_Text").style.backgroundColor = "red";
document.getElementById("showtext").innerHTML = "Form is empty";
} else {}
document.getElementById("form_Text").onkeyup = function() {
document.getElementById("form_Text").style.backgroundColor = "white";
document.getElementById("showtext").innerHTML =
"Form is not Empty,No red Background";
};
};
Fill Your Form:
<input id="form_Text" type="text" />
<div id="showtext"></div>
解决方法
您正在尝试在加载js之后立即使用let form = document.getElementById("form_Text").value;
获取输入值。因此,它将始终为空。您需要在事件监听器中调用它。
document.getElementById("form_Text").onfocus = function() {
let form = document.getElementById("form_Text").value;
...
}
但是您可以使用input
事件代替focus
和keyup
const formText = document.getElementById("form_Text");
const showText = document.getElementById("showText");
formText.addEventListener('input',function(evt) {
const inputValue = evt.target.value;
if (inputValue == '') {
formText.style.backgroundColor = "red";
showText.innerHTML = "Form is empty";
} else {
formText.style.backgroundColor = "white";
showText.innerHTML = "Form is not Empty,No red Background";
}
})
Fill Your Form:
<input id="form_Text" type="text" />
<div id="showText"></div>
更新
您可以在下面找到其他绑定方式。您可以使用keyup
事件监听器来代替使用两个单独的事件(focus
和oninput
)。
这是一个比较keyup
和input
事件的SO线程:https://stackoverflow.com/a/38502715/1331040
const formText = document.getElementById("form_Text");
const showText = document.getElementById("showText");
formText.oninput = function(evt) {
const inputValue = evt.target.value;
if (inputValue == '') {
formText.style.backgroundColor = "red";
showText.innerHTML = "Form is empty";
} else {
formText.style.backgroundColor = "white";
showText.innerHTML = "Form is not Empty,No red Background";
}
}
Fill Your Form:
<input id="form_Text" type="text" />
<div id="showText"></div>
,
//I understood this part:
const formText = document.getElementById("form_Text");
const showText = document.getElementById("showText");
//But I didn't understand addEventListener part since I haven't learned about it,I think it will make sense to me once I learned about addEventListener part
formText.addEventListener('input',function(evt) {
const inputValue = evt.target.value;
// understood if and else aswell**
if (inputValue == '') {
formText.style.backgroundColor = "red";
showText.innerHTML = "Form is empty";
} else {
formText.style.backgroundColor = "white";
showText.innerHTML = "Form is not Empty,No red Background";
}
})
//can we use unfocus and onkeyup event instead of input event to solve this:**
let form_Text = document.getElementById("form_Text").value;
let showText = document.getElementById("showText");
document.getElementById("form_Text").onfocus = function () {
if (form_Text = "") {
form_Text.style.backgroundColor = "red";
showText.innerHTML = "Form is empty";
}
};
else {
document.getElementById("form_Text").onkeyup = function () {
form_Text.style.backgroundColor = "white";
showText.innerHTML = "Form is not Empty,No red Background";
};
}
Fill Your Form:
<input id="form_Text" type="text" />
<div id="showText"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。