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

Posted 2023-02-23

技术标签:

【中文标题】更改文本框输入的背景颜色在为空时不起作用【英文标题】：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/

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

【问题讨论】：

【参考方案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";

【讨论】：

以上是关于更改文本框输入的背景颜色在为空时不起作用的主要内容，如果未能解决你的问题，请参考以下文章

更改标题的背景颜色不起作用

JS <select> 列表框在单击/更改时不起作用

Unity System 和 Newtonsoft 库在为 android 构建时不起作用

为啥背景过渡：linear-gradient() 在悬停时不起作用？

使用jquery动态更改背景颜色后，背景颜色的CSS悬停选择器不起作用

我正在尝试更改背景的颜色，但它不起作用