Clever Geek Handbook

How to hide div class when filling a textbox

How to hide a class div

using JavaScript when a textbox is full?

I want to hide the loadData class strong> while the textbox (t1) is full.

Sample code:

<input type="text" name="t1" placeholder="search">


<div class="loadData">
     // some content here....
</div>
+3


source to share


4 answers


Use jQuery . Check the value of the text box on the event keyup

and perform the appropriate operation.

$('input[type="text"]').on('keyup', function() {
    ($.trim($(this).val()) != '') ? $('.loadData').hide() : $('.loadData').show();
})


FIDDLE

+3


source 


    window.onload = function () {
    elements = document.getElementsByName("t1"); 
    var divs = document.getElementsByClassName("loadData");
    elements.onblur = function() { divs.style.visibility="hidden"; };
    };


+4


source


User jQuery's

blur function.

<script>
$(function(){
  $("[name=t1]").blur(function(){
    if ($(this).val() == '') {
      $(".loadData").hide();
    }
  });
})
</script>

Explanation:

You are calling the function on the blur

textbox event .

This means that the user has filled in the text box and wants to keep the text box.

In this function body, hide the div with the class loadData

.

+1


source


add onblur="showdiv()"

to input field and add this function to your javascript

function showdiv()    
{    
    var a=document.getElementsByClassName('loadData');
    a[0].style.visibility='hidden';    
}
-1


source






More articles:


All Articles