Imagine that I have a input for the phone number, but that when the user focuses on it I want to change the text from placeholder , for example from "phone" to "just numbers" .
You can do this with CSS in :focus for example. Or do 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=""> You can use javascript, get the focus event, and set the value in placeholder and onblur to return to the previous value, and you choose which element you want to do this 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="">I've created a new way in which you'll only worry about javascript once, just put the alter-placeholder class on the element and the placeholder-focus and placeholder-blur attributes by 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="">I do not know a decent way to do this without using js, but if you are eager to use css only, the alternative gambetosa 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>Only with CSS I 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"'> No% change from% to alternate placeholder, and% from% to original. The placeholder is a property of the element and I believe it can only be changed via JavaScript.
You can use the pseudo element before of a div with contentEditable true to get an approximation of the desired result with only 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>