显示填充了值属性的占位符值

Question

我有一个输入如下所示：

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

当将他的value属性传递给0时，这个值将替换html中的占位符，我该如何解决这个问题？因为我想继续显示placehorder，并且我需要保留值为0的value属性。

Answer 1

您可以使用其他元素来显示占位符，如下所示(伪元素不能用于输入，所以我使用了span和相邻的组合子，您也可以只使用JavaScript来显示/隐藏标签(：

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>