CODEWITHSUNDEEP
javascriptjqueryhtml
sgerbhctim
sgerbhctim

Reputation: 3640

trying to hide something when input selected

This is my Fiddle

Everything is written in the fiddle.

What the problem is: I want the text to disappear when I select to start typing something in my input.

  1. If i focus on the input, I want the

    to disappear, and only reappear if i havent typed anything in,

  2. If i have something typed in my text input, i want the hide to stay that way.

I honestly have no clue how to do this, and i gave a bs attempt at it to show what i mean

thank you so much for your help!

Upvotes: 0

Views: 81

Answers (6)

João Silva
João Silva

Reputation: 91349

Use .blur() to detect when the input loses focus, and then test if its length is 0 using .val(). If it is, show the p again:

$(document).ready(function () { 
    $(".type").focus(function() {
        $("p").hide();
    }).blur(function () {
        if ($(this).val().length == 0) {
            $("p").show();
        }
    });
});

DEMO.

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

Looks like there is some error in the fiddle that you are trying to run.. I created a new fiddle and seems to be working fine for some reason..

​$('.type').on('focus', function(){
    $("p").hide();         
});

$('.type').on('keyup blur', function(){
    if($('.type').val() == ''){
        $("p").show();       
    }
});

​Check this FIDDLE

Use the keyup and blur events to get the functionality you want..

Upvotes: 1

Nick Kugaevsky
Nick Kugaevsky

Reputation: 2945

Here is my recipe

$(document).ready(function(){
    $(".type")
    .focus(function(){
        $("p").hide()
    ;})
    .blur(function () {
      if (!$(this).val()) {
        $("p").show()
      ;}
    });
});

Upvotes: 0

Elyx0
Elyx0

Reputation: 369

The answer is in this fiddle : http://jsfiddle.net/yLK5c/3/

    $(".type").on('focus keyUp',function(){ 
        if ($(this).val() == "") {
        $(this).attr('placeholder',"");
        }            
});
      $(".type").blur(function(){ 
          if ($(this).val() == "") {
             $('p').hide();           
          } else {
          $('p').show(); 
          }             
        $(this).attr('placeholder',"type something");    
        });

Upvotes: 0

Ethan Brown
Ethan Brown

Reputation: 27282

As João points out, you should use the blur event to detect when you lose focus. However, it appears additionally you want the text to disappear if there's any text in the text box. The way to do that to listen for keyup events and then check the value that's in the edit box. (If you use keydown, the letter will not be added to the text box, so you'll be a character behind.)

I think what you want is this:

$(".type").focus(function(){ 
    if( $(this).val() == '' ) $("p").hide();
});
$(".type").blur(function(){
    $("p").show();
});
$(".type").keyup(function(){
    if( $(this).val() == '' ) $("p").hide();
    else $("p").show();
});

JsFiddle: http://jsfiddle.net/Mz95q/

Upvotes: 0

Nicodemeus
Nicodemeus

Reputation: 4083

I updated your fiddle to work, use 'on', and use blur.

$(document).ready(function(){
    $(".type").on('focus', function(){ 
        $("p.explanatory").hide();            
    }).on('blur', function() { 
        if($('.type').val() == '')
        {
            $("p.explanatory").show();      
        }
    });

});

Here is my work! http://jsfiddle.net/M2Z88/5/

Upvotes: 0

Related Questions