Hide input value

Question

I need to hide/remove the value from my input, but I’m not getting it at all, where am I missing? Thank you very much

HTML:

<div class="caixa-pesquisa">
   <div class="caixa-pesquisa-input">
      <input type="text" class="pesquisa-class" value="Digite o produto desejado...">   
         <div class="caixa-pesquisa-btn"><a class="btn-buscar" href="#">buscar</a></div>
   </div>
</div>

JS:

<script type="text/javascript" >
$(document).ready(function (){
$('.pesquisa-class').click(function(){if(this.value == this.defaultValue) {this.value = ;}});
$('.pesquisa-class').blur(function(){if (this.value == ) {this.value = this.defaultValue;}});
});
</script>

Answer 1

Answer:

You don’t need anything you’re doing, you can just use the attribute placeholder of <input> in this way:

<input type="text" class="pesquisa-class" placeholder="Digite o produto desejado..." value="">

Explanation:

Utilise javascript to do what you need, it wouldn’t be necessary because the <input>'s of html contains some attributes that facilitate many things, among them the placeholder would be the most suitable attribute for what you want to do.

The placeholder is the most modern way to inform the user what he has to type in that field, previously we used Label’s that would be texts above the field.

Documentation of the placeholder

Compatibility:

Tested and running in the following browsers:

• Mozilla Firefox (27.0)
• Google Chrome (32.0)
• Safari (5.1.7)
• Opera (12.16)
• Internet Explorer (IE11,IE10)

Does not work in the following browsers:

• Internet Explorer(IE9,IE8,IE7)

Solution for Unsupported Browsers:

Using a function called placeholder():

function placeholder(str){
    $('input').css('color','#ccc');
    $('input').val(str);
}

You should run it once when loading your page:

placeholder("Digite o produto desejado...");

And you should assign these events to your input, which would be ao clicar nele(click) to clear its value, and ao sair dele(Blur) place the placeholder again.

$('input').on("click", function () {
  var ValorAnterior = $.cookie("ValorAtual") || "";
  $(this).val(ValorAnterior);
});
$('input').on("blur", function () {
  $.cookie("ValorAtual", $(this).val());
  placeholder("Digite o produto desejado...");
});

But you have to include the plugin jQuery Cookie (if you want to use another form of cookie is your option).

Answer 2

Your javascript has 2 errors, fixing is like this:

<script>
   $(document).ready(function (){
      $('.pesquisa-class').click(function(){if(this.value == this.defaultValue) {this.value = '';}});
      $('.pesquisa-class').blur(function(){if (this.value == '') {this.value = this.defaultValue;}});
  });
</script>

In the .blur your if you were just if (this.value == ) without the other value. No .click was this.value = ; without a value to define.

Code in the Jsfiddle

Answer 3

Use the attribute placeholder in the input.
This attribute only shows the text you choose while the value input is empty.
Example:

<div class="caixa-pesquisa">
   <div class="caixa-pesquisa-input">
      <input type="text" class="pesquisa-class" placeholder="Digite o produto desejado..." value="">   
         <div class="caixa-pesquisa-btn"><a class="btn-buscar" href="#">buscar</a></div>
   </div>
</div>

Answer 4

What you’re looking for is a placeholder, in this case, if your HTML 5 support page, you just need to put "Type the desired product..." into a placeholder attribute, the only one though is that not all browsers fully support the placeholder(IE), then there is the alternative in javascript or jquery plugins , I searched the site in English, because I know I saw a similar question recently, but I did not find anything.

Answer 5

Since you are using jQuery can write code this way:

$(document).ready(function () {
    // armazena valor
    $('.pesquisa-class').get(0).defaultValue = $('.pesquisa-class').val();
    // limpa valor
    $('.pesquisa-class').click(function(){
        if($(this).val() == this.defaultValue) $(this).val('');
    });
    // recupera valor
    $('.pesquisa-class').blur(function(){
        if($(this).val() == '') $(this).val(this.defaultValue);
    });
});

You have to store your default value in order to compare.

To test use the Jsfiddle.

In modern browsers the tag input supports the property placeholder which serves exactly what is being done via javascript.

Answer 6

The idea is to leave a standard text for user instruction and/or label of the field to be filled. As stated in the other answers, this feature is available in all modern browsers via the attribute placeholder:

<input type="text" value="" placeholder="teste" />

For older browsers to understand the attribute placeholder the use of a plugin (can use at will). It is only enabled when it detects that the browser does not support placeholders natively.

Answer 7

Use the <input type='password'> is much better.. and when you go to take the value of it it returns you as string, you understand ? nothing encrypted..

thus: http://jsfiddle.net/V4swX/