更改文本框输入的背景颜色在为空时不起作用答案

【问题标题】：Changing background color of text box input not working when empty更改文本框输入的背景颜色在为空时不起作用
【发布时间】：2013-06-17 15:00:42
【问题描述】：

如果输入为空，我很难使用此 javascript 代码更改文本输入的背景颜色。

代码如下：

function checkFilled() {
    var inputVal = document.getElementById("subEmail").value;
    if (inputVal == "") {
        inputVal.style.backgroundColor = "yellow";
                }
        }

示例：http://jsfiddle.net/2Xgfr/

我希望文本框一开始是黄色的。

【问题讨论】：

标签： javascript text input colors background

【解决方案1】：

您可以使用 javascript 和 css 对其进行样式设置。将样式添加到 css 并使用 javascript 使用 classlist 属性添加/删除样式。

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');
  }
}

.no-image-url-error {
  color: red;
  display: none;
}

.text-error {
  border: 1px solid red !important;
}

<div class="div-image-background">
  <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>
</div>

【讨论】：

【解决方案2】：

// program to change color of txtbox if empty string submitted
function chgColor() {
  let x = document.getElementById("txt").value;
  if (x == "") {
    document.getElementById("txt").style.backgroundColor = "yellow";
  }
}

<input type="email" name="hi" value="hi" id="txt">
<button type="button" onclick="chgColor();">ok</button>

【讨论】：

请添加一些解释。为什么您认为您提出的解决方案可能对 OP 有所帮助。

【解决方案3】：

您可以先让 CSS 设置文本框的样式，然后让 js 更改它：

<input type="text" style="background-color: yellow;" id="subEmail" />

js:

function changeColor() {
  document.getElementById("subEmail").style.backgroundColor = "Insert color here"
}

【讨论】：

【解决方案4】：

演示 --> http://jsfiddle.net/2Xgfr/829/

HTML

<input type="text" id="subEmail" onchange="checkFilled();">

JavaScript

 function checkFilled() {
    var inputVal = document.getElementById("subEmail");
    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "yellow";
    }
    else{
        inputVal.style.backgroundColor = "";
    }
}

checkFilled();

注意：您正在检查值并将颜色设置为不允许的值，这就是它给您错误的原因。像上面那样尝试。

【讨论】：

如果文本框有东西怎么去掉颜色？
为什么不使用 getElementsById 而不是在 HTML 中放入 getElementsByClassName 并更改类的 id？
@samyb8 因为document.getElementById() 返回单个元素而getElementsByClassName() 返回节点列表，所以您必须循环遍历它，因为许多其他控件具有相同的类！ 仅供参考： javascript.about.com/library/bldom08.htm 查看演示 --> jsfiddle.net/2Xgfr/17

【解决方案5】：

<! 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>

【讨论】：

【解决方案6】：

试试这个：

function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal == "") {
    inputVal.style.backgroundColor = "yellow";
    }
}

【讨论】：

【解决方案7】：

在 body 标签的 onLoad 上尝试设置它

document.getElementById("subEmail").style.backgroundColor = "yellow";

然后在更改该输入字段后检查是否存在某些值，或者将其涂成黄色

function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
    inputVal.style.backgroundColor = "yellow";
            }
    }

【讨论】：

【解决方案8】：

你没有调用函数，还有其他错误，应该是：

function checkFilled() {
    var inputVal = document.getElementById("subEmail");
    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "yellow";
    }
}
checkFilled();

Fiddle

您将inputVal 设置为输入的字符串值，但随后您尝试在其上设置style.backgroundColor，这将不起作用，因为它是字符串，而不是元素。我更改了您的变量以存储元素对象而不是其值。

【讨论】：

【解决方案9】：

不要为输入值添加样式，所以使用 like

function checkFilled() {
    var inputElem = document.getElementById("subEmail");
    if (inputElem.value == "") {
        inputElem.style.backgroundColor = "yellow";
                }
        }

【讨论】：