CODEWITHSUNDEEP
javascriptjqueryhtmlcss
banksdev
banksdev

Reputation: 308

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

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

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.

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

Simple 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.

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

https://i.sstatic.net/RFHs1.jpg

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.

Upvotes: 4

Views: 23109

Answers (5)

Canvas
Canvas

Reputation: 5897

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

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.

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)

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

Upvotes: 5

robsonrosa
robsonrosa

Reputation: 2688

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.

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

You can do it, replacing your selector by your already declared variables $input1 and $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");

When should be: $input2.css("background-color", "transparent"); (without #).

Next One

Nice. Next one. The id's you are setting logindata1 and logindata2 are on your divs. So, you are wrongly trying to get the value of the div instead the value of the input. you can fix your selector by appending input, this way:

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

Upvotes: 1

Ricky Ruiz
Ricky Ruiz

Reputation: 26751

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

Add the attribute required to your <input> tags and then use the pseudo-class :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>

Upvotes: 7

John Wu
John Wu

Reputation: 52240

Your code clears the background color when the length is 0. The way it checks the length is with this snippet of code:

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

The selector $(".form-control") will select all elements with the CSS class of .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:

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

Upvotes: 1

Seano666
Seano666

Reputation: 2238

Your value check is not right. With your jQuery, you are checking the value of both inputs every time.

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

Upvotes: 0

Related Questions