How to delete Input Placeholder when Clicking inside the Field

Asked

Viewed 2,458 times

1

I’d like to know how to erase the placeholder of a input when clicking inside it. When searching here I saw answers on how to delete the value but I found nothing about placeholder.

I would like a help that it is not necessary to call the function within the input, ex:

<input type="text" id="input" value="Value" onClick="func()"/>

My Code:

<form action="enviar.php" method="post" class="wpcf7-form">

    <input type="text" name="nome" value="" size="40" class="classe_form_1" placeholder="Seu nome (obrigatório)"><br>

    <input type="email" name="email" value="" size="40" class="classe_form_1" placeholder="Seu e-mail (obrigatório)"><br>

    <input type="text" name="assunto" value="" size="40" class="classe_form_1" placeholder="Assunto (obrigatório)"><br>

    <textarea name="mensagem" cols="40" rows="10" class="classe_form_2" placeholder="Mensagem (obrigatório)"></textarea><br>
    <button type="submit" class="botao_contato" id="botao-contato">Enviar</button>
</form>
javascript jquery

  • You say delete as soon as you click, even without the person starting to type?

  • That’s right @Guilhermelautert

3 answers

5


The placeholder function is to help explain the functionality or content the input should have. This placeholder disappears when you start typing in the input. To make it delete when the input is in focus you can do so:

$(':input').on('focus', function() {
    this.dataset.placeholder = this.placeholder;
    this.placeholder = '';
}).on('blur', function(){
    this.placeholder = this.dataset.placeholder;
});

The idea is to transfer this information to a field data- at the moment of focus, and restore when no longer in focus.

jsFiddle: https://jsfiddle.net/jw3uyn36/

The selector :input works for input, textareaand select.

  • and how I place the code only to be used specifically in the classes of this form, in case classe_form_1 and classe_form_2 ?

  • @Wendell in this case you can point the selector directly like this: $('.classe_form_1, .classe_form_2').on('focus', ...etc.

  • Much simpler than in pure JS, I took to post.

1

You can also do it with CSS:

input:focus::-webkit-input-placeholder {
   color: transparent;
}
input:focus:-moz-placeholder { /* Firefox 18- */
   color: transparent;  
}
input:focus::-moz-placeholder {  /* Firefox 19+ */
   color: transparent;  
}
input:focus:-ms-input-placeholder {  
   color: transparent;  
}
<input type="text" placeholder="Seu nome (obrigatório)">

0

Rode with pure JS.

var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++){
  var input = inputs[i];
  input.addEventListener('focus', function(){
    var place = this.getAttribute('placeholder');
    this.setAttribute('placeholder', '');
    var blur = function(){
      this.setAttribute('placeholder', place);
    }
    this.addEventListener('blur', blur);
  });
}
<input type="text" name="nome" value="" size="40" class="classe_form_1" placeholder="Seu nome (obrigatório)"><br>

  • That way every time there’s one focus in an element it will add a new .addEventListener to the element that is never removed.

  • Truth @Sergio forgot this question, but it would be a blur right? yeah focus He only does it the first time.

  • @Sergio correct me if I’m wrong, but just by naming the function, I don’t make it anonymous anymore, I’ve already prevented the creation of multiple events with the same effect, correct? no need to use the removeEventListener

  • The problem remains the same. Check out the console here: https://jsfiddle.net/jw3uyn36/1/

  • @Sergio But this only shows that the function is being fired, not that I am overloading the memory with multiple references.

  • @Sergio Multiple identical Event listeners

  • Look at the count, it’s growing exponentially.

  • Let’s go continue this discussion in chat.

Show 3 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.