使用 JavaScript 更改输入字段的背景颜色

Change Background color of input field using JavaScript

本文关键字：背景 颜色 字段 输入 JavaScript 使用      更新时间：2023-09-26

我正在制作一个表单，并使用JavaScript使输入字段仅读取。我想将只读属性的默认颜色更改为绿色或黄色。

.HTML 

<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

当有人点击女性时，具有 Id 的"年龄"和"电话"的输入将仅使用 JavaScript 读取。

.JS

$(function() {
$("input[name='sex']").change(function() {
    if($(this).val() == "female") {
        $("#age").attr("disabled", true);
        style="backgroundcolor=green"
        $("#phone").attr("disabled", true);
    } else if($(this).val() == "male") {
        $("#age").attr("disabled", false);
        $("#phone").attr("disabled", false);
    }
});
});

我想在输入字段为只读时更改输入字段的颜色。

更新于 22 Jul 2020

<小时 />

方法一：

您可以使用 ： .css((

$("#age,#phone").css("background-color","#0F0");


$("input[name='sex']").change(function() {
    if($(this).val() == "female") {
        $("#age,#phone").attr("disabled", true).css("background-color","#0F0");
    } else if($(this).val() == "male") {
        $("#age,#phone").attr("disabled", false).css("background-color","#FFF");;
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

方法2：

另一种简单的方法是使用CSS类：

.JS：

$("#age,#phone").addClass("green");

.CSS：

.green { background-color:#0F0;}


$("input[name='sex']").change(function() {
                var isOptional = $(this).val() == "female";
        $("#age,#phone").attr("disabled", isOptional)
        if(isOptional) $("#age,#phone").addClass("green");
        else $("#age,#phone").removeClass("green");
});
.green{
    background-color:#0F0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

方法3：

还有另一种使用CSS选择器的简单方法可以做到这一点。

.JS：

$("#age,#phone").attr("disabled", true);

.CSS：

input:disabled { background-color:#0F0;}


$("input[name='sex']").change(function() {
  $("#age,#phone").attr("disabled", $(this).val() == "female");
});
input:disabled {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female <br/>
Age:<input type="text" name="age" id="age" size="20">
Hobbies:<input type="text" name="hobbies" id="hobbies" size="20"><br/>
Phone:<input type="text" name="phone" id="phone" size="20"><br/>

请参阅 ： https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled

$("#age").css('background-color', 'green');

或 

$(this).css('background-color', 'green');

你可以试试这个：

$("input[name='sex']").change(function () {
    if ($(this).val() == "female") {
        $("#age").attr("disabled", true);
        $("#age, #hobbies, #phone").css("background-color", "green");
        $("#phone").attr("disabled", true);
    } else if ($(this).val() == "male") {
        $("#age").attr("disabled", false);
        $("#phone").attr("disabled", false);
        $("#age, #hobbies, #phone").css("background-color", "white");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="sex" value="male">Male
<br/>
<input type="radio" name="sex" value="female">Female
<br/>Age:
<input type="text" name="age" id="age" size="20">Hobbies:
<input type="text" name="hobbies" id="hobbies" size="20">
<br/>Phone:
<input type="text" name="phone" id="phone" size="20">
<br/>

为什么不只使用 css？

为在 css 文件中禁用的输入定义一个样式，然后像现在一样用 js 禁用它们......

例如：

input[disabled] { background-color:#F00; }

作为初学者，这是我更改输入字段背景颜色的解决方案。我不确定这是否是最佳实践，但我想与这里的专家分享。

    $("#name").focusin(function() {
      $(this).addClass("green");
    });
    $("#name").blur(function() {
      $(this).removeClass("green");
      if (!$(this).val()) {
        $(this).addClass("warning");
      } else {
        $(this).removeClass("warning");
        $(this).addClass("green");
      }
    });
.warning {
  background-color: red;
  color: white;
}
.green {
  background-color: rgba(144, 238, 144, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formulier">
  <form>
    <div class="form-group row">
      <label class="col-md-2">Name: </label>
      <div class="col-md-6">
        <input type="text" class="col-md-6" id="name" />
      </div>
    </div>
  </form>
</div>

相关文章：