Fatal编程技术网
  • javascript/
  • Javascript 输入文本时如何更改输入字段的背景色？

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

javascript jquery html css

Javascript 输入文本时如何更改输入字段的背景色？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我对Javascript和jQuery非常陌生，似乎无法确定我的代码为什么会这样做 我创建了两个看似相同的函数来更改输入字段的背景色。 他们的目标是，如果在字段中键入任何内容，则将给定输入字段的背景色转换为00FF7F颜色。如果不是这样，这个领域应该是透明的 代码JS: $(document).ready(function () { var $input1 = $("#logindata1"); var $input2 = $("#logindata2"); funct

我对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:

简单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中，尝试键入用户名和密码字段，查看它们的反应如何不同

所发生事情的图像。不希望在此处包含所有图像：

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

您的值检查不正确。使用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);       
});
当长度为0时，代码将清除背景色。它检查长度的方法是使用以下代码片段：

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

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

var value = $.trim($("#logindata1 input").val()); //get user ID
var value = $.trim($("#logindata2 input").val()); //get password
如果这两个字段都是必需的，那么这里有一个更简单的解决方案，只使用CSS

将所需的属性添加到标记中，然后使用伪类：valid

代码段：

登录箱{ 宽度：400px； 高度：200px； 左边距：自动； 右边距：自动； 利润率最高：25%； } 罗吉娜达先生{ 左边距：自动； 右边距：自动； 边缘顶部：20px； 高度：60px； 宽度：290px； 过渡：0.25秒缓解； } .表格管制{ 左边距：自动； 右边距：自动； 高度：55px； 宽度：288px； 边框样式：无； 背景色：透明； 文本对齐：居中； 边框：实心2px00ff7f； 过渡：0.25秒缓解； 字体大小：25px； 字体系列：投石机MS； } .窗体控件：悬停{ 盒影：0px 0px 30px 2E8B57； } ：-webkit输入占位符{ 颜色：00FF7F； } .form控件：有效{ 背景色：00FF7F； } jsFiddle：

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事件上创建一个侦听器，同样，如果我们只需将一个类应用于希望背景颜色更改的所有输入，那么我们只需创建一个侦听器，它将对具有类change background的任何输入执行此操作

Html

还有旁注
监听keyup返回时，可能有人想复制并粘贴用户名和密码，如果他们这样做，则使用右键单击并粘贴不会触发keyup事件。

您有一些小错误，但无需担心。我们可以解决它

第一个问题 其他答案指出了一些重要的问题：您正试图通过表单控件类选择所有元素来获得值

var值=$.trim$.form-control.val

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

var value = $.trim($input1.val());
var value = $.trim($input2.val());
第二 嗯。第一个问题解决了。第二个问题在第二个函数中。您试图设置无效的css:$input2.cssbackground-color，透明

什么时候应该是：$input2.cssbackground-color，透明；没有

下一个 很好。下一个。您正在设置的id logindata1和logindata2位于您的DIV上。因此，您错误地试图获取div的值，而不是输入的值。您可以通过添加输入来修复选择器，方法如下：

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);
});
卓越的方法。您还可以将if语句替换为简单的$this.toggleClass'filled-background'，value.length！==0;@robsonrosa是的，该死的，我忘了你可以在toggleClass中提供一个bool:D欢呼声将更新答案谢谢你的回复！：它工作得非常好-这些注释帮助我清楚地理解了代码中发生的事情，因此非常感谢您帮助我学习：@Alex听到这个消息太好了：，如果其中任何一个是正确的答案，请您勾选适当的一个，谢谢。@Canvas嘿，很抱歉，我的回复被延迟了-我现在已经这么做了：我勾选了一个CSS解决方案，因为它是对我最有效的解决方案，但是所有的js/jquery答案让我对listen事件有了更好的理解，所以谢谢你：D 
.filled-background {
  background-color: #00FF7F;
}

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

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);
});