CODEWITHSUNDEEP
htmljquery
Best Friday
Best Friday

Reputation: 89

Show box by clicking on Input

The box is displayed when the input key is pressed. The problem is that when I use code .focus nothing happens.

Friends, how can I solve this problem? and Why does the following code not run ? $("#send_order_txtCount").focus (function(){ ..... )}

$(document).ready(function() {
  $("#number").focus(function() {
      $("#box1").css('display', 'block'); //.fadeIn("slow");
    },
    function() {
      $("#box1").hover(function() {
          $("#box1").css('display', 'block') //.fadeIn("slow");
        },
        function() {
          $("#box1").fadeOut();
        },
        function() {
          $("#box1").fadeOut();
        })
    });
});
#box1 {
  display: none;
  width: 30.5%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="number" min="0">

<span id="box1"> value =  
    <span class="me1">
        1,000
    </span>
<span class="wbb3"> | 
    </span>
<span class="me1">
        10,000
    </span>
</span>

Upvotes: 1

Views: 202

Answers (1)

Swati
Swati

Reputation: 28522

You can use focusin event this will get called when input is focus and .blur to fadeOut your box same for box.

Demo Code :

//when input is focus
$("#number").on('focusin', function() {
  $("#box1").css('display', 'block');
}).blur(function() {
  //when blur focusout
  $("#box1").fadeOut();
});

$("#box1").hover(function() {
    $("#box1").css('display', 'block')
  },
  function() {
    $("#box1").fadeOut();
  });
#box1 {
  display: none;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="number" min="0" autocomplete="off">

<span id="box1"> value =  
    <span class="me1">
        1,000
    </span>
<span class="wbb3"> | 
    </span>
<span class="me1">
        10,000
    </span>
</span>

Upvotes: 1

Related Questions