堆栈内存溢出
  简体   繁体   English

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

[英]How to change the background color of an input field when text is entered?

 原文  2016-09-16 21:25:38  6   5    javascript/ jquery/ html/ css

问题描述

I'm pretty new with Javascript and jQuery, and can't seem to indentify the reason why my code acts like it does. 我对Javascript和jQuery相当陌生，似乎无法确定我的代码的行为方式。

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. 他们的目标是，如果在字段中键入任何内容，则将给定输入字段的背景色更改为颜色#00FF7F 。 And if not, the field should be transparent. 如果没有，该字段应该是透明的。

Code JS: 代码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: 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;
}

Simple HTML: 简单的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>

On the jsbin above, try typing in both the Username and Password field to see how they react differently. 在上面的jsbin上，尝试在“用户名”和“密码”字段中键入内容，以查看它们的反应不同。

Images of what happens. 发生的图像。 Didn't want to include all images here: 不想在这里包括所有图像：

http://imgur.com/a/qgubP http://imgur.com/a/qgubP

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. 我意识到可能有一种方法可以让我的js / jquery变成每个输入字段都调用而不是每个函数都有一个函数。

5 个解决方案

解决方案1
 3 已采纳  2016-09-16 21:42:05

If both of these fields are required, here's a much simpler solution using CSS only. 如果这两个字段都是必需的，这是仅使用CSS的简单得多的解决方案。

Add the attribute required to your <input> tags and then use the pseudo-class :valid . 将required的属性添加到您的<input>标记中，然后使用伪类:valid 。 

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

Code snippet: 程式码片段： 

 #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>

解决方案2
 2  2016-09-16 21:42:19

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

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

Instead of listening for the keyup event and then running a function, just create a listener on the change event, also if we just apply one class to all inputs we want the background colour to change on, we can just create one listener which will do it for any input with the class change-background . 无需侦听keyup事件然后运行函数，只需在change事件上创建一个侦听器，如果我们仅对要更改背景颜色的所有输入都应用一个类，则只需创建一个侦听器即可对于具有change-background类的任何输入，都可以使用它。

Html 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 (the extra class for background color) CSS（背景色的额外类） 

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

Also side note 还边注

listening for keyup is back, someone may want to copy and paste their username and password and if they do this it won't trigger an keyup event if they use right click and paste. 侦听keyup又回来了，某人可能想要复制并粘贴其用户名和密码，如果这样做，则使用右键单击并粘贴不会触发keyup事件。

解决方案3
 1  2016-09-16 21:37:40

Your code clears the background color when the length is 0. The way it checks the length is with this snippet of code: 当长度为0时，您的代码将清除背景色。使用以下代码片段检查长度的方式： 

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

The selector $(".form-control") will select all elements with the CSS class of .form-control . 选择器$(".form-control")将选择CSS类为.form-control所有元素。 This is a problem because there is more than one of them; 这是一个问题，因为其中不止一个。 in this case, it will always return the value from the first element found. 在这种情况下，它将始终从找到的第一个元素返回值。

You should change the code to check for the specific control by searching by ID, like so: 您应该更改代码以通过按ID搜索来检查特定控件，如下所示： 

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

解决方案4
 1  2016-09-16 21:48:38

You have some minor mistakes, but no worry. 您有一些小错误，但不用担心。 We can fix it. 我们可以解决它。

First Problem 第一个问题

Other answers are pointing something important: you are trying to get the value selecting all elements with form-control class. 其他答案也指出了一些重要的问题：您正在尝试使用form-control类来获取选择所有元素的值。

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

You can do it, replacing your selector by your already declared variables $input1 and $input2 . 您可以执行此操作，将选择器替换为已经声明的变量$input1和$input2 。 This way: 这条路： 

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

Second 第二

Ok. 好。 First problem solved. 第一个问题解决了。 The second problem is in your second function. 第二个问题是您的第二个功能。 You trying to set an invalid css: $input2.css("#background-color", "transparent"); 您尝试设置无效的CSS： $input2.css("#background-color", "transparent");

When should be: $input2.css("background-color", "transparent"); 什么时候应该是： $input2.css("background-color", "transparent"); (without # ). （不带# ）。

Next One 下一个

Nice. 真好 Next one. 下一个。 The id's you are setting logindata1 and logindata2 are on your divs. 您正在设置的id是logindata1和logindata2在您的div上。 So, you are wrongly trying to get the value of the div instead the value of the input. 因此，您错误地尝试获取div的值而不是输入的值。 you can fix your selector by appending input , this way: 您可以通过添加input来固定选择器，方法如下： 

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

Finally 最后

So, finally, it should work: 因此，最后，它应该工作： 

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

解决方案5
 0  2016-09-16 21:37:27

Your value check is not right. 您的价值检查不正确。 With your jQuery, you are checking the value of both inputs every time. 使用jQuery，您每次都会检查两个输入的值。

Try checking the single inputs that you are interested in instead. 尝试检查您感兴趣的单个输入。 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 只要有用 javascript 输入的文本，就改变输入字段的背景颜色？ - Change background color of input field as long as there is text entered with javascript? 在输入字段中输入文本时，是否可以更改div的背景？ - Is there a way to change the background of a div when text is entered into an input field? 如何在聚焦文本输入字段时更改 div 的背景颜色？ - How to change the background color of the div while focusing the text Input field? 在字段中输入文本更改div的背景颜色 - Input text in field change background color of div 输入特定字符时，在输入字段中进行Clint写入期间更改文本颜色 - change text color during Clint write in input field when specific char entered 如何根据输入的值更改输入的背景色 - How to change background color of input based on entered value 输入字段接收文本时如何更改标签颜色？ - How to change label color when input field receives text? 如何使用按钮更改在搜索字段中输入的文本值的颜色？ - How to change the color of text values entered in the search field with a button? 当我输入并提交内容时，如何停止输入表单以更改背景颜色和文本颜色？ - How do I stop the input form to change background color and text color when I input and submit something? 使用JavaScript更改输入文本字段的背景颜色 - Change background color of input text field using JavaScript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM