CODEWITHSUNDEEP
html
WPfan
WPfan

Reputation: 113

Display placeholder value with value attribute populated

I have an input written as follows:

<input type="number" id="motoGasolina" value="0" placeholder="Km/mês"
            style="margin-bottom: 5px;" onblur="motoGasolina(); transportesTotal()">

When passing his value attribute to 0 this value replaces my placeholder in the html, how do I solve this? Because I want to continue displaying the placehorder and I need to keep the value attribute with the value 0.

Upvotes: 0

Views: 56

Answers (1)

RatajS
RatajS

Reputation: 1429

You can use other elements to display what would be the placeholder, like this (pseudoelements can’t be used on input, so I used span and the adjacent combinator, you can use just JavaScript to display / hide the label as well):

document.getElementById("myInput").onkeydown = function(event) {
  if(this.value==0)
    this.value = "";
};
document.getElementById("myInput").oninput = function(event) {
  if(this.value=="")
    this.value = 0;
  this.setAttribute("value", this.value);
};
#placeholder {
  position: absolute;
  left: 20px;
  color: gray;
}
#myInput {
  position: relative;
  z-index: 2;
  border: 1px solid black;
}
#myInput[value='0'], #myInput[value=''] {
  background-color: transparent;
  color: transparent;
}
<form>
  <input type="number" value="0" id="myInput">
  <span id="placeholder">Enter a number</span>
</form>

Upvotes: 1

Related Questions