Input length greater than 0 not working properly

Question

I'm trying to write some code that if the input is empty the input color changes to red. After user types in input, the red color is removed.

Html

<html>
<head>
    <!-- add main style -->
    <link rel="stylesheet" href="../css/style.css">
    <!-- add JQuery -->
    <script
        src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
</head>
<body>
<div class="financeContainer">
    <div class="searchBox">
        <input id="financeSearch" type="text" class="financeInput" placeholder="Enter The Code">
        <button id="financeBtn" class="financeSearchBt"><i class="fas fa-search financeSearchIcon"></i></button>
    </div>
</div>
<script>

</script>
</body>
</html>

Css

.redColor{
    color: red;
}

jQuery

$(document).ready(function () {
    $("#financeSearch").keydown(function () {
        if ($("#financeSearch").val().length>0){
            $("#financeSearch").removeClass("redColor")
        }
    });
    $(document).bind('keypress', function(e) {
        if(e.keyCode==13){
            $('#financeBtn').trigger('click');
        }
    });
    $("#financeBtn").click(function () {
        var financeKey = $("#financeSearch").val();
        if (financeKey == ""){
            $("#financeSearch").addClass("redColor")
        }
});

When the button is submitted the input gets the class redColor.and I expect if the user types the red color is removed. But after typing 2 characters it's being done. I want it after the first character typed to be done.

With a tiny script you can solve this very elegant using CSS: https://stackoverflow.com/questions/44333727/simulation-of-a-placeholder/44333787#44333787 — Asons, May 02 '19 at 07:26

Maheer Ali · Accepted Answer · 2019-05-02T06:48:01.650

When the keydown is called the last entered character is not yet added to the value of input. So thats why you need to enter two characters to remove red color.

You should use keyup instead of keydown

You don't need to select $("#financeSearch") inside the event handler just use $(this).

And also no need to compare the length greater than 0. You can directly put $(this).val().length because all values other than 0 in numbers are truthy.

$(document).ready(function() {
  $("#financeSearch").keyup(function() {
    if ($(this).val().length) {
      $(this).removeClass("redColor")
    }
  });
  $(document).bind('keypress', function(e) {
    if (e.keyCode == 13) {
      $('#financeBtn').trigger('click');
    }
  });
  $("#financeBtn").click(function() {
    var financeKey = $("#financeSearch").val();
    if (financeKey == "") {
      $("#financeSearch").addClass("redColor")
    }
  });
});

.redColor {
  color: red;
}

<!-- add JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div class="financeContainer">
  <div class="searchBox">
    <input id="financeSearch" type="text" class="financeInput" placeholder="Enter The Code">
    <button id="financeBtn" class="financeSearchBt"><i class="fas fa-search financeSearchIcon"></i></button>
  </div>
</div>

(cough) you should rather use `input` event. – Kaiido May 02 '19 at 07:36 — Kaiido, May 02 '19 at 07:36

Kaiido · Answer 2 · 2019-05-02T08:10:27.850

You can actually do it all with CSS and a single HTML attribute. Also note that at least in Chrome, to target the placeholder's color, you need to do it explicitely in CSS

:invalid, :invalid::placeholder {
  color: red;
  box-shadow: none;
}

<div class="financeContainer">
  <div class="searchBox">

    <input id="financeSearch" type="text" class="financeInput" placeholder="Enter The Code"
    required ><!-- add this attribute -->
    
    <button id="financeBtn" class="financeSearchBt"><i class="fas fa-search financeSearchIcon"></i></button>
  </div>
</div>

But if what you want is really just to set the color of this placeholder, then you don't even need this HTML attribute:

#financeSearch::placeholder {
  color: red;
}

<div class="financeContainer">
  <div class="searchBox">

    <input id="financeSearch" type="text" class="financeInput" placeholder="Enter The Code">
    
    <button id="financeBtn" class="financeSearchBt"><i class="fas fa-search financeSearchIcon"></i></button>
  </div>
</div>

Input length greater than 0 not working properly

2 Answers2