如果文本框值为0，则隐藏文本框值

Question

如果文本框的值为0，如何隐藏该值?

我不想隐藏文本框，只隐藏值，如果值为0。

<input type=number value="0"/>

Answer 1

试试这个

function valChange(obj){
if(obj.value=="0"){
obj.style.color="#fff"
} else{
obj.style.color="#000"
}
}

input[value="0"] { color: #fff; }

<input id="num" type=number value="0" onchange="valChange(this);"/>

Answer 2

jQuery解决方案

使用三元操作符可以很容易地实现这一点。

$("#txt").val($("#txt").val() === "0" ? "" : $("#txt").val());
$('#txt').on('input propertychange paste', function() {
$("#txt").val($("#txt").val() === "0" ? "" : $("#txt").val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="0" / id="txt">

Answer 3

该解决方案使用JavaScript事件侦听器侦听输入的更改。每当这个值改变时，它都会检查这个值，如果它等于0，那么它将输入的颜色设置为透明，当它不等于0时，它将设置回初始值。

document.querySelector('input[type="number"]').addEventListener('change', e => {
if (e.currentTarget.value == 0) {
e.currentTarget.style.color = 'transparent'
} else {
e.currentTarget.style.color = 'initial'
}
})

<input type="number"/>

Answer 4

答案稍微取决于您如何存储输入的值。但实际上你可以这样做:

<input type="number" value={inputNumber ? inputNumber : NaN} />

你可以使用"或null而不是NaN，这取决于您使用inputNumber并在启动时将inputNumber初始化为0。

这行得通，因为当inputNumber为0时，它是假的，所以NaN(或")或null)将被输入接收，这将导致不显示任何内容。