20

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

这是代码：

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

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

我希望文本框一开始会变成黄色。

4

9 回答 9

39

演示 --> 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();

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

于 2013-06-20T16:38:04.333 回答
4

您没有调用该函数并且您有其他错误，应该是：

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

小提琴

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

于 2013-06-20T16:36:19.777 回答
4

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

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

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

function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
    inputVal.style.backgroundColor = "yellow";
            }
    }
于 2013-06-20T16:40:06.740 回答
3

试试这个：

function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal == "") {
    inputVal.style.backgroundColor = "yellow";
    }
}
于 2013-06-20T16:44:57.397 回答
2

不要将样式添加到输入值中，因此请使用 like

function checkFilled() {
    var inputElem = document.getElementById("subEmail");
    if (inputElem.value == "") {
        inputElem.style.backgroundColor = "yellow";
                }
        }
于 2013-06-20T16:35:55.450 回答
2 
<! 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>

于 2013-06-20T16:47:21.700 回答
0

您可以使用 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>

于 2016-09-12T06:59:05.977 回答
0

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

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

js：

function changeColor() {
  document.getElementById("subEmail").style.backgroundColor = "Insert color here"
}
于 2019-03-22T08:16:35.353 回答
0 

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

于 2021-08-01T17:53:33.680 回答