Hide input value

11

I need to hide / remove the value of my input, but I'm not getting anywhere, where am I going? 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>
    
asked by anonymous 14.02.2014 / 19:28

7 answers

9

Answer:

You do not need anything of what you're doing, you can only use the placeholder attribute of <input> like this:

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

Explanation:

Use to do what you need, would not % contains some attributes that

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

placeholder documentation

Compatibility:

Tested and working 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 non-compliant browsers :

Using a function called <input> :

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

You should run it once when you load your page:

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

And you should assign these events to your input, which would be placeholder (click) clear the value of it, and placeholder() (blur) put 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...");
});

However you have to include the jQuery Cookie plugin (if you wish to use another form of cookie, / p>     

14.02.2014 / 19:43
2

Your javascript has 2 errors, so it looks 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>

No .blur your if was only if (this.value == ) without the other value. No .click was this.value = ; without a value to set.

JSFiddle code

    
14.02.2014 / 19:36
2

Use the placeholder attribute in the input.
This attribute only shows the text you choose while the value of the 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>
    
14.02.2014 / 19:44
2

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

    
14.02.2014 / 19:56
1

Since you are using jQuery you can write the 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 so you can compare.

To test use JSFiddle .

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

    
14.02.2014 / 19:34
1

The idea is to leave a default 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 through the placeholder attribute:

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

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

    
14.02.2014 / 20:22
-2

Use <input type='password'> is much better .. and when you get the value it returns you as string, you see? nothing encrypted ..

like this: link

    
14.02.2014 / 19:38