Modify appearance of an input

Question

Modify appearance of an input

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (-1 votes)

1

Hi, I explain, I have 2 input text and I want it in the first one if you have 4 or less characters, you should use the red form and if you have more in yellow

I have it all on the same page and with conditionals if, I thought about while but it becomes infinity and does not let me write, I apologize that I walk something green

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>LOGIN</title>
    <script src="Scripts/jquery-3.2.1.js"></script>
    <script>

        $(document).ready(function () {
                 if ($("#e1").length <= 4) {
                     $("#e1").css("background-color", "red");
            };           
                 if ($("#e1").length > 4) {
                     $("#e1").css("background-color", "yellow");
                 };
        });
    </script>
</head>
<body>
    <p>NOMBRE:<input type="text" id="e1" /></p><br />
    <p>EMAIL:<input type="email" /></p>

</body>
</html>

javascript jquery css

asked by Thokoles 24.09.2017 в 17:37

source

4 answers

Problems generating JavaScript sums Php artisan error no direct script access allowed

score 1 · Answer 1

You must manage one of the keystroke events, try this:

$(document).ready(function () {
    $( "#id" ).keydown(function() {
             if ($("#e1").length <= 4) {
                      $("#e1").css("background-color", "red");
             };           
             if ($("#e1").length > 4) {
                      $("#e1").css("background-color", "yellow");
             };
    });
});

Each time there is a push in the field, the function will be triggered inside keydown , testing the ifs

score 1 · Answer 2

I would do it this way, considering the performance.

Would set the background in red by default via CSS

I would hear the changes in the input and it would change to yellow only when I have more than 4 characters.

$(function() {
  $('#txtTest').on('input', function(e) {
    if ($(this).val().length > 4) {
      color = "yellow";
    }else{
      color = "red";
    }
    $("#txtTest").css("background-color", color);
  });
});

#txtTest {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txtTest" type="text" placeholder="Escribe al menos 5 caracteres y verás">

score 1 · Answer 3

Using the keyup event (when a key is raised) I check if the input has more than 4 letters, without jquery .

window.addEventListener('DOMContentLoaded',function(){
 var i = document.getElementById('nombre');
 i.addEventListener('keyup',function(){
    i.style.backgroundColor = i.value.length > 4 ? 'yellow' : 'red';
 });
});

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 NOMBRE:<input type="text" id="nombre">
</body>
</html>

score -1 · Answer 4

Hi I put it in the change event so that camabie depending on the value.

Here is the example and the code

link

$(document).ready(function () { $('#e1').on('change', function(){ if($(this).val().length <= 4 ){ $(this).css('background-color', 'red'); } else { $(this).css('background-color', 'yellow'); } }); });