dwiyanto dwiyanto - 3 months ago 10
CSS Question

CSS input change and return to normal

I tried to make a warning if the input is not the same , like the example below:

HTML

<form>
<input id="target" class="form-control" type="text" value="">
</form>


JS

$data = document.getElementById("target").value = "";
$("#target").keyup(function(){
if ($data.length > 3){
$("#target" ).css("border-color", "red");
} ;
});


But it did not work, so if true then the border-color has to change

Answer

You need to move your $data variable into inside keyup events. Since you've add jQuery tag, I've selecting object using jQuery method too.


UPDATE

  • Simplify the code

$("#target").keyup(function(){
  var $data = $("#target").val();
  $("#target" ).css("border-color", $data.length > 3 ? "red" : "");  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="target" class="form-control" type="text" value="">
</form>


Jangan lupa mark sebagai answer ya kalo udah OK..