How to Delete Input Placeholder When Clicking Within Field

Question

How to Delete Input Placeholder When Clicking Within Field

Navigation

#1 by (4 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I'd like to know how to delete placeholder from input when clicking inside it. When searching here I saw answers on how to delete value but I did not find anything about placeholder .

I would like help that you do not need to call the function inside input , eg:

<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

asked by anonymous 14.10.2016 / 15:58

3 answers

1

You can also do 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)">

15.10.2016 / 02:48

0

Monteu 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>

14.10.2016 / 16:16

Divs has width with 33% because they do not line up? List files in a folder that contain a specific word in the name

score 4 · Accepted Answer

The function of the placeholder is to help explain the functionality or content that the input must have. This placeholder disappears when you start writing in the input. To make it delete when the input is in focus you can do this:

$(':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 data- field at focus time, and restore when it is no longer in focus.

jsFiddle: link

The :input selector works for input , textarea and select .