javascript 更改文本框输入的背景颜色在空时不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17218987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing background color of text box input not working when empty
提问by samyb8
I am having a tough time with this javascript code to change the background color of a text input if the input is empty.
如果输入为空，我很难使用此 javascript 代码更改文本输入的背景颜色。
Here is the code:
这是代码：
function checkFilled() {
var inputVal = document.getElementById("subEmail").value;
if (inputVal == "") {
inputVal.style.backgroundColor = "yellow";
}
}
Example: http://jsfiddle.net/2Xgfr/
示例：http: //jsfiddle.net/2Xgfr/
I would expect the textbox to come out yellow at the beginning.
我希望文本框在开始时变成黄色。
回答by Dhaval Marthak
DEMO-->http://jsfiddle.net/2Xgfr/829/
演示-->http://jsfiddle.net/2Xgfr/829/
HTML
HTML
<input type="text" id="subEmail" onchange="checkFilled();">
JavaScript
JavaScript
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
inputVal.style.backgroundColor = "yellow";
}
else{
inputVal.style.backgroundColor = "";
}
}
checkFilled();
Note:You were checking value and setting color to value which is not allowed, that's why it was giving you errors. try like the above.
注意：您正在检查值并将颜色设置为不允许的值，这就是它给您错误的原因。像上面一样尝试。
回答by MrCode
You didn't call the function and you have other errors, should be:
您没有调用该函数并且还有其他错误，应该是：
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
inputVal.style.backgroundColor = "yellow";
}
}
checkFilled();
You were setting inputValto the string value of the input, but then you tried to set style.backgroundColoron it, which won't work because it's a string, not the element. I changed your variable to store the element object instead of its value.
您正在设置inputVal输入的字符串值，但随后您尝试对其进行设置style.backgroundColor，这将不起作用，因为它是一个字符串，而不是元素。我改变了你的变量来存储元素对象而不是它的值。
回答by dev2d
on body tag's onLoad try setting it like
在 body 标签的 onLoad 尝试将其设置为
document.getElementById("subEmail").style.backgroundColor = "yellow";
and after that on change of that input field check if some value is there, or paint it yellow like
然后在更改该输入字段时检查是否存在某个值，或者将其涂成黄色
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
inputVal.style.backgroundColor = "yellow";
}
}
回答by Ankit Zalani
Try this:
试试这个：
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal == "") {
inputVal.style.backgroundColor = "yellow";
}
}
回答by gaspyr
<! DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" id="subEmail">
<script type="text/javascript">
window.onload = function(){
var subEmail = document.getElementById("subEmail");
subEmail.onchange = function(){
if(subEmail.value == "")
{
subEmail.style.backgroundColor = "red";
}
else
{
subEmail.style.backgroundColor = "yellow";
}
};
};
</script>
</body>
回答by bugwheels94
Don't add styles to value of input so use like
不要向输入值添加样式，因此请使用 like
function checkFilled() {
var inputElem = document.getElementById("subEmail");
if (inputElem.value == "") {
inputElem.style.backgroundColor = "yellow";
}
}
回答by Kurenai Kunai
You can style it using javascript and css. Add the style to css and using javascript add/remove style using classlist property. Here is a JSFiddlefor it.
您可以使用 javascript 和 css 设置样式。将样式添加到 css 并使用 javascript 添加/删除使用 classlist 属性的样式。这是一个JSFiddle。
<div class="div-image-text">
<input class="input-image-url" type="text" placeholder="Add text" name="input-image">
<input type="button" onclick="addRemoteImage(event);" value="Submit">
</div>
<div class="no-image-url-error" name="input-image-error">Textbox empty</div>
addRemoteImage = function(event) {
var textbox = document.querySelector("input[name='input-image']"),
imageUrl = textbox.value,
errorDiv = document.querySelector("div[name='input-image-error']");
if (imageUrl == "") {
errorDiv.style.display = "block";
textbox.classList.add('text-error');
setTimeout(function() {
errorDiv.style.removeProperty('display');
textbox.classList.remove('text-error');
}, 3000);
} else {
textbox.classList.remove('text-error');
}
}
回答by I.M.SMART
You could have the CSS first style the textbox, then have js change it:
您可以先让 CSS 设置文本框的样式，然后让 js 更改它：
<input type="text" style="background-color: yellow;" id="subEmail" />
js:
js：
function changeColor() {
document.getElementById("subEmail").style.backgroundColor = "Insert color here"
}
