CODEWITHSUNDEEP
javascriptjquery
user2179026
user2179026

Reputation:

How to handle focusout on textbox properly?

I have written html as following lines of code

<input id="<code generated id>" type="text" value="select"/>
<div id="<code generated id>" class="popup">
    <ul id="<code generated id>" class="none">
       <li><input type="checkbox" value="A"/></li>
       <li><input type="checkbox" value="B"/></li>
       <li><input type="checkbox" value="C"/></li>
    </ul>
</div>

and style is 

 .none
 {
   display:none;
 }

I have written jQuery as below lines of code in order to make ul tag visible 

 $(document).ready(function () {
       $('#<%= pnlchkouter.ClientID %> #<%= txtBoxCustom.ClientID %>').bind('focus', function () {
          //  alert("<%= chkList.ClientID %>");
          $(".popup-checkbox ul").css({"display":"none"});
          $('#<%= chkList.ClientID %>').css({"display":"block" });
      });
  });

When I write focusout like below 

$(document).ready(function () {
      $('#<%= pnlchkouter.ClientID %> #<%= txtBoxCustom.ClientID %>').bind('focusout', function () {
          $(".popup-checkbox ul").css({ "display": "none" });
      });
});

It works as required but the issue is that I am not able to check the checkboxes.

Upvotes: 0

Views: 168

Answers (1)

user5243536
user5243536

Reputation:

Are you looking for something like this? Just for simplicity I have given some dummy ids and classes to HTML elements.

$(document).ready(function () {
       $('#mytextbox').bind('focus', function () {
          //  alert("<%= chkList.ClientID %>");
          $(".popup-checkbox ul").css({"display":"none"});
          $('#checkboxul').css({"display":"block" });
      });
  
  $('#mytextbox').bind('focusout', function () {
        setTimeout(function(){
          if(!$("#checkboxul input[type=checkbox]").is(":focus"))
            $(".popup-checkbox ul").css({ "display": "none" });
          },200);
      });

  
  
  });
.none
 {
   display:none;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="mytextbox" type="text" value="select"/>
<div id="mypopupdiv" class="popup-checkbox">
    <ul id="checkboxul" class="none">
       <li><input type="checkbox" value="A"/></li>
       <li><input type="checkbox" value="B"/></li>
       <li><input type="checkbox" value="C"/></li>
    </ul>
</div>

Upvotes: 1

Related Questions