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

【问题标题】：Hide textbox value if the value is 0如果值为 0，则隐藏文本框值
【发布时间】：2021-02-26 06:01:36
【问题描述】：

如果值为0，如何隐藏文本框中的值？

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

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

【问题讨论】：

标签： javascript php html jquery laravel

【解决方案1】：

试试这个

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

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

&lt;input id="num" type=number value="0" onchange="valChange(this);"/&gt;

【讨论】：

我喜欢这个答案。我的反射动作是用 JS 来做。但它应该可以工作，但在 Chrome 88 中似乎没有。输入文本始终为#fff。
谢谢，但这也会使其他号码不可见
啊，这是因为当输入发生变化时，DOM 中的值不会更新。可能必须使用 JS...
你能告诉我怎么做吗？抱歉，我是网络开发新手
@wanprogrammer 完成请立即尝试

【解决方案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">

【讨论】：

第一次有效，第二次无效
如果我想在其他地方发布或使用这个值怎么办。他只是说隐藏价值
所以基本上这会使 value 为 null ？
你总是检查 null 的值吗？

【解决方案3】：

此解决方案使用 JavaScript 事件侦听器来侦听输入的更改。每次值更改时，它都会检查该值，如果等于 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'
  }
})

&lt;input type="number"/&gt;

【讨论】：

【解决方案4】：

答案稍微取决于您存储输入值的方式。但基本上你可以这样做：

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

你可以使用""或者null来代替NaN，这取决于你对inputNumber的使用并且在启动时将inputNumber初始化为0。

这是有效的，因为当 inputNumber 为 0 时，它是假的，因此输入将接收到 NaN（或“”或 null），这将导致不显示任何内容。

【讨论】：

设置 NaN 会导致很大的问题。
你的意思是这样
我假设输入中的值会改变，因此需要存储在变量中。按照您的说法，该值将始终为 0，因此永远不会出现。