Question

我是Javascript和jQuery的新手，似乎无法识别我的代码行为的原因。

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

代码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上，尝试输入用户名和密码字段，看看它们的反应方式如何。

发生了什么的图像。不想在此处包含所有图片：

http://imgur.com/a/qgubP

我意识到可能有一种方法可以将我的js / jquery分解为每个输入字段调用的1个函数，而不是每个函数都有一个函数。

Answer 1

如果需要这两个字段，这里只是使用CSS的更简单的解决方案。

将属性required添加到<input>代码中，然后使用伪类: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>

Answer 2

jsFiddle：https://jsfiddle.net/7vzjz2u5/3/

的jQuery

$(document).ready(function() {
 $('.change-background').on('change', function() {
    var $this = $(this);
    var value = $.trim($this.val());

    // toggleClass can be provided a bool value,
    // If we provide true we add class, if false we remove class
    $this.toggleClass('filled-background', value.length !== 0);
  }).change();
  // We also want to call a 'change' event on 
  // all inputs with the change-background class just incase the page has
  // pre-filled in values
});

而不是监听keyup事件然后运行函数，只需在change事件上创建一个监听器，如果我们只将一个类应用于所有输入，我们希望背景颜色改变on，我们可以创建一个监听器，它将为类change-background的任何输入执行此操作。

HTML

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

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

Css（背景颜色的额外类）

.filled-background {
  background-color: #00FF7F;
}

另外注意

关注keyup，有人可能想要复制并粘贴用户名和密码，如果他们这样做，如果他们使用右键单击并粘贴，则不会触发keyup事件。< / p>

Answer 3

当长度为0时，您的代码会清除背景颜色。检查长度的方式是使用以下代码片段：

var value = $.trim($(".form-control").val());

选择器$(".form-control")将选择CSS类为.form-control的所有元素。这是一个问题，因为它们不止一个;在这种情况下，它将始终返回找到的第一个元素的值。

您应该通过ID搜索来更改代码以检查特定控件，如下所示：

var value = $.trim($("#logindata1 input").val()); //get user ID
var value = $.trim($("#logindata2 input").val()); //get password

Answer 4

你有一些小错误，但不用担心。我们可以解决它。

第一个问题

其他答案指出一些重要的事情：您正试图通过form-control类选择所有元素的值。

var value = $.trim($(".form-control").val());

您可以使用已声明的变量$input1和$input2替换选择器。这样：

var value = $.trim($input1.val());
var value = $.trim($input2.val());

第二

确定。第一个问题解决了第二个问题是你的第二个功能。您尝试设置无效的CSS：$input2.css("#background-color", "transparent");

应该是：$input2.css("background-color", "transparent");（没有#）。

下一个

尼斯。下一个。您在div上设置logindata1和logindata2的ID。所以，你错误地试图得到div的值而不是输入的值。您可以通过附加input来修复您的选择器：

var $input1 = $("#logindata1 input");
var $input2 = $("#logindata2 input");

最后

所以，最后，它应该有效：

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

    function onChangeInput1() {

        $input1.css("background-color", "#00007F");
        var value = $.trim($input1.val());

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

    function onChangeInput2() {
        $input2.css("background-color", "#00007F");
        var value = $.trim($input2.val());

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

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

Answer 5

您的价值检查不对。使用jQuery，您每次都要检查两个输入的值。

尝试检查您感兴趣的单个输入。

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

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

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

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

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

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

如何在输入文本时更改输入字段的背景颜色？

5 个答案:

另外注意

第一个问题

第二

下一个

最后