6

Imagina que eu tenho um input para o número de telefone, mas que quando o usuário focar nele eu quero mudar o texto do placeholder, por exemple de "telefone" para "apenas números".

É possível fazer isso com CSS no :focus por exemplo. Ou tenho que usar JS?

Quando focar nesse inpute gostaria de trocar o texto do placeholder para por exemplo "apenas números"
<br><br>
<input type="tel" placeholder="telefone" name="" id=""> 

4 Respostas 4

8

Primeiro método

Você pode usar javascript, peguei o evento focus e seto o valor no placeholder e o onblur para retornar ao valor anterior, e você escolhe qual o elemento você quer fazer este efeito utilizando o querySelector.

var elemento = document.querySelector("input");
elemento.onfocus = function(){
    elemento.placeholder = "apenas número";
};
elemento.onblur = function(){
    elemento.placeholder = "telefone";
};
Quando focar nesse inpute gostaria de trocar o texto do placeholder para por exemplo "apenas números"
<br><br>
<input type="tel" placeholder="telefone" name="" id="">

Segundo método

Criei uma nova forma na qual você vai preocupar com o javascript apenas uma vez, basta colocar a classe alter-placeholder no elemento e os atributos placeholder-focus e placeholder-blur definindo o texto, veja um exemplo:

var elemento = document.querySelector(".alter-placeholder");
elemento.onfocus = function(){
	elemento.placeholder = this.getAttribute('data-placeholder-focus');
};
elemento.onblur  = function(){
	elemento.placeholder = this.getAttribute('data-placeholder-blur');
};
Quando focar nesse inpute gostaria de trocar o texto do placeholder para por exemplo "apenas números"
<br><br>
<input 
placeholder="telefone" 
data-placeholder-blur="telefone" 
data-placeholder-focus="apenas número" 
class="alter-placeholder" 
type="tel" name="" id="">

3
  • 1
    Vitor obrigado pela contribuição, acredito que esse código vai me ajudar até em outras ocasiões! []´s
    – hugocsl
    Commented 12/12/2018 às 14:26
  • 1
    Eu recomendaria usar data-placeholder-blur e data-placeholder-focus pois placeholder-blur e placeholder-focus não são atributos válidos, tornando sua página um documento HTML5 inválido. Commented 12/12/2018 às 16:34
  • Obrigado @fernandosavio, você tem razão, editei a minha resposta Commented 12/12/2018 às 16:39
6

Não conheço uma forma decente elegante de fazer isto sem usar js, mas se estiver com muita vontade de utilizar apenas css, a gambetosa alternativa abaixo deve quebrar o galho:

.input-holder{
  position: relative;
}

.input-holder .placeholderson{
  color: currentColor;
  opacity: .7;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  padding: 2px;
  display:none;
}
.input-holder input::placeholder {
  color: transparent;
}

.input-holder input:focus:placeholder-shown + .placeholderson.focused-placeholder{
  display:block
}
.input-holder input:not(:focus):placeholder-shown  + .placeholderson.focused-placeholder + .placeholderson.blurred-placeholder {
  display:block
}
<br><br>
<label class="input-holder">
  <input type="tel" name="" id="" placeholder="....">
  <div class="focused-placeholder placeholderson">Somente números...</div>
  <div class="blurred-placeholder placeholderson">Telefone...</div>
</label>

2
  • 2
    Por incrível que pareça, essa é a forma que mais se aproxima do semanticamente ideal no HTML. Você tem os elementos corretos fazendo seus respectivos papéis, a única coisa é que não são exibidos da forma natural - e quase sempre não são, o CSS é justamente para isso. Você pode ter o <label> informando a finalidade do campo e um <span> alertando as restrições; se eles forem exibidos sobre o <input>, que mal tem? Inclusive é o que o Material usa para animar o placeholder: pt.stackoverflow.com/q/203018/5878
    – Woss
    Commented 12/12/2018 às 15:00
  • 1
    Interessante @AndersonCarlosWoss... Resolvi o problema do required com o seletor :placeholder-shown e adicionando um placeholder transparente. Quando o placeholder desaparece da o mesmo resultado que o :invalid Commented 12/12/2018 às 15:19
3

Só com CSS acredito que não, mas com JS dá, inclusive inline:

Quando focar nesse inpute gostaria de trocar o texto do placeholder para por exemplo "apenas números"
<br><br>
<input type="tel" placeholder="telefone" name="telefone" id="" onfocus='this.placeholder="apenas números"' onblur='this.placeholder="telefone"'> 

No onfocus mudo para o placeholder alternativo, e no onblur volto ao original. O placeholder é uma propriedade do elemento e creio que só possa ser alterado via JavaScript.

1
  • Valeu mais uma vez Sam
    – hugocsl
    Commented 12/12/2018 às 14:24
2

Você pode usar o pseudo-elemento before de uma div com contentEditable true para conseguir uma aproximação do resultado desejado apenas com CSS:

div[type=tel][contentEditable=true] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  background-color: white;
  background-color: -moz-field;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;  
  font: -moz-field;
  font: -webkit-small-control;
  margin-top: 5px;
  padding: 2px 3px;
  width: 398px;
}

div[type=tel]::before {
  color: #909090;
  font-weight: 300;
  transform: translate3d(0, 0, 0);
}

div[type=tel]:empty:not(:focus)::before {
  content: attr(data-placeholder);
  transition: all 0.2s ease-in-out;
}

div[type=tel]:empty:focus::before {
  content: attr(data-hint);
}
<div type="tel" contentEditable=true data-placeholder="telefone" data-hint="apenas números"></div>

7
  • Bem legal, pouco código bom uso do css, o problema é que no Submit não pega o "valor" do "input" se não me engano.
    – hugocsl
    Commented 12/12/2018 às 17:25
  • @hugocsl é, acho que realmente nesse caso não pega mesmo, então provavelmente não seja um bom uso com o form
    – Sorack
    Commented 12/12/2018 às 17:26
  • Fica valendo mais para curiosidade pra quem não manja muito de pseudo elemento e pseudo classe ver um bom uso. apesar de não funcionar por forme pode servir pra outras coisas no front..
    – hugocsl
    Commented 12/12/2018 às 17:27
  • @hugocsl na real tem um pseudo-elemento placeholder também, mas não consegui descobrir se dá pra trocar o conteúdo dele pelo CSS
    – Sorack
    Commented 12/12/2018 às 17:27
  • 1
    @hugocsl é, realmente, só estilo. O que podemos esperar é que, como é experimental, talvez incluam algo mais depois
    – Sorack
    Commented 12/12/2018 às 17:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .