输入文本时如何更改输入字段的背景色?

本文介绍了输入文本时如何更改输入字段的背景色?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对Javascript和jQuery还是很陌生，似乎无法确定我的代码如此工作的原因.

I'm pretty new with Javascript and jQuery, and can't seem to indentify the reason why my code acts like it does.

我创建了两个看似相同的函数来更改输入字段的背景色.他们的目标是，如果在字段中键入任何内容，则将给定输入字段的背景色更改为颜色#00FF7F.如果没有，则该字段应该是透明的.

I have created two seemingly identical functions to change the background color of an input field.Their goal is to turn the background color of the given input field to the color #00FF7F if anything is typed in the field. And if not, the field should be transparent.

代码JS:

$(document).ready(function () {
    var $input1 = $("#logindata1");
    var $input2 = $("#logindata2");

    function onChangeInput1() {
        $input1.css("background-color", "#00FF7F");
        var value = $.trim($(".form-control").val());

        if (value.length === 0) {
            $input1.css("background-color", "transparent");
        }
    }

    function onChangeInput2() {
        $input2.css("background-color", "#00FF7F");
        var value = $.trim($(".form-control").val());

        if (value.length === 0) {
            $input2.css("#background-color", "transparent");
        }
    }

    $input1.on("keyup", onChangeInput1);
    $input2.on("keyup", onChangeInput2);
});

css:

#loginbox {
    width: 400px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25%;
}

.logindata {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    height: 60px;
    width: 290px;
    transition: 0.25s ease;
}

.form-control {
    margin-left: auto;
    margin-right: auto;
    height: 55px;
    width: 288px;
    border-style: none;
    background-color: transparent;
    text-align: center;
    border: solid 2px #00FF7F;
    transition: 0.25s ease;
    font-size: 25px;
    font-family: "Trebuchet MS";
}

.form-control:hover {
    box-shadow: 0px 0px 30px #2E8B57;
}

::-webkit-input-placeholder {
    color: #00FF7F;
}

简单的HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Test</title>

        <!-- Stylesheet link -->
        <link rel="stylesheet" type="text/css" href="assets/style.css">

        <!-- jQuery link -->
        <script type="text/javascript" src="assets/vendor/jquery-3.1.0.min.js"></script>

    </head>
    <body>

        <div id="loginbox">
              <div class="logindata" id="logindata1">
                  <input type="text" class="form-control" placeholder="Username">
              </div>
              <div class="logindata" id="logindata2">
                  <input type="password" class="form-control" placeholder="Password">
              </div>
        </div>

        <!-- Javascript link-->
        <script type="text/javascript" src="assets/js/javascript.js"></script>
    </body>

在上面的jsbin中，尝试在用户名"和密码"字段中键入内容，以查看它们的反应不同.

On the jsbin above, try typing in both the Username and Password field to see how they react differently.

发生的情况的图像.不想在这里包括所有图像:

Images of what happens. Didn't want to include all images here:

http://imgur.com/a/qgubP

我意识到可能有一种方法可以让我的js/jquery变成1个函数，每个输入字段都调用该函数，而不是每个函数都有一个函数.

I realize there probably is a way to compromise my js/jquery into 1 function that each input field calls instead of have a function for each.

推荐答案

如果这两个字段都是必需的，这是仅使用CSS的简单得多的解决方案.

If both of these fields are required, here's a much simpler solution using CSS only.

将属性required添加到您的<input>标记中，然后使用伪类:valid.

Add the attribute required to your <input> tags and then use the pseudo-class :valid.

.form-control:valid {
  background-color: #00FF7F;
}

代码段:

#loginbox {
  width: 400px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25%;
}
.logindata {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  height: 60px;
  width: 290px;
  transition: 0.25s ease;
}
.form-control {
  margin-left: auto;
  margin-right: auto;
  height: 55px;
  width: 288px;
  border-style: none;
  background-color: transparent;
  text-align: center;
  border: solid 2px #00FF7F;
  transition: 0.25s ease;
  font-size: 25px;
  font-family: "Trebuchet MS";
}
.form-control:hover {
  box-shadow: 0px 0px 30px #2E8B57;
}
::-webkit-input-placeholder {
  color: #00FF7F;
}
.form-control:valid {
  background-color: #00FF7F;
}

<div id="loginbox">
  <div class="logindata" id="logindata1">
    <input type="text" class="form-control" placeholder="Username" required>
  </div>

  <div class="logindata" id="logindata2">
    <input type="password" class="form-control" placeholder="Password" required>
  </div>
</div>

这篇关于输入文本时如何更改输入字段的背景色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！