CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dr. Abbos
Dr. Abbos

Reputation: 139

not hiding dropdown when focus changes

Let's imagine I have three inputs :

<input type="text" id="a">
<input type="text" id="b">
<input type="text" id="c">

and one div table that should drop down when writing some data into input "a" or input "b". Well the logic I want to to take is:{ if you click and add some data to input a show that table to me->table appears->if I click on input b dont hide that div, however if I click somewhere else for example in input c, hide the table. It's been 3rd day I cannot do this. P.S. My boss told not to use $timeout. It should be done with blur and focus

Upvotes: 0

Views: 129

Answers (3)

Master Yoda
Master Yoda

Reputation: 4422

You want to make use of classes when hiding or showing your div containing the table.

Also take note of the Jquery focus (click into) and blur (click out of) classes

$(".show").focus(function()
{
   $('#showTable').show();
});
  
$(".show").blur(function()
{
  $('#showTable').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="show" type="text" id="a">
<input class="show" type="text" id="b">
<input class="dontShow" type="text" id="c">
<div id="showTable" hidden="hidden">
  <table>
    <thead>
      <tr><th>test 1</th><th>test 2</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>2</td></tr>
      <tr><td>3</td><td>4</td></tr>
    </tbody>
  </table>
</div>

Upvotes: 0

user7110739
user7110739

Reputation: 

$("#showData").hide();

function lookup(arg) {
    var id = arg.getAttribute('id');
    var value = this.value;
    console.log(id);
    if (id === "a" || id === "b") {
        $("#showData").show();

    } else {
        $("#showData").hide();
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="a" onkeyup="lookup(this);" onClick="lookup(this);">
<input type="text" id="b" onkeyup="lookup(this);" onClick="lookup(this);">
<input type="text" id="c" onkeyup="lookup(this);" onClick="lookup(this);">
<div id="showData">A Or B is Clicked here</div>

Upvotes: 0

ab29007
ab29007

Reputation: 7766

Just wrap input a and b in same class and then use blur and focus on that class.

$(document).ready(function(){
$('#showab').hide();
$("input.change").focus(function(){
    $('#showab').show();
}); 
$("input.change").blur(function(){
    $('#showab').hide();
});
});
input{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="change" type="text" id="a">
<input class="change" type="text" id="b">
<input type="text" id="c">
<div id="showab">table here</div>

Upvotes: 1

Related Questions