Is it possible to change Placeholder in Focus with CSS?

Question

Imagine I have one input to the phone number, but that when the user focuses on it I want to change the text of the placeholder, for example of "telephone" for "only numbers".

You can do this with CSS on :focus for example. Or I have to use 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=""> 

Answer 1

First method

You can use javascript, I took the Focus and Seto event the value in the placeholder and onblur to return to the previous value, and you choose which element you want to do this effect using 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="">

Second method

I created a new way in which you will only worry about javascript once, just put the class alter-placeholder in the element and the attributes placeholder-Focus and placeholder-Blur defining the text, see an example:

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="">

Answer 2

I don’t know a way decent elegant to do this without using js, but if you are very keen to use only css, the gambetosa alternative below should break the branch:

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

Answer 3

Only with CSS believe not, but with JS gives, including 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"'> 

In the onfocus switched to alternative placeholder, and onblur back to the original. The placeholder is a property of the element and I believe can only be changed via Javascript.

Answer 4

You can use the pseudo-element before of a div with contentEditable true to achieve an approximation of the desired result with 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>