Menu
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.
715
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
