Question

如果输入为空，我正在用这个javascript代码来改变文本输入的背景颜色。

以下是代码：

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

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

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

Answer 1

DEMO --> 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();

注意：您正在检查值并将颜色设置为不允许的值，这就是它为您提供错误的原因。试试如上所述。

Answer 2

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

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

<强> Fiddle

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

Answer 3

在body标签的onLoad上尝试将其设置为

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

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

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

Answer 4

试试这个：

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

Answer 5

不要将样式添加到输入值，所以请使用

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

Answer 6

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

Answer 7

您可以使用javascript和css设置样式。将样式添加到css并使用classlist属性使用javascript add / remove样式。这是一个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');
  }
}

Answer 8

您可以先将CSS设置为文本框样式，然后让js对其进行更改：

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

js：

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

Answer 9

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

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

9 个答案: