javascript - 当值为 0 时，添加占位符而不是数字和范围输入中的值 - Angular.js

Question

我有一个数字和范围输入，它们使用 Angular.js 值使用相同的值协同工作。当该值设置为 0 时(这是页面加载时的默认值 $scope.lbs_needed = 0;)，我想显示一个 placeholder="0"每当数字或范围输入的值设置为 0 时，0 值就不会出现在用户输入的前面，而无需手动删除默认 0。

这是我的 html:

<form>
    <div class="form-group">
        <label for="number">Pounds of nitrogen desired per acre:</label>
        <input type="number" class="form-control number-input" id="number" ng-model="lbs_needed" ng-change="calculate2()" value="{[{lbs_needed}]}" min="0" max="500" value="{[{lbs_needed}]}" placeholder="0">
        <input type="range" min="0" max="500" class="form-control" id="number" ng-model="lbs_needed" ng-change="calculate2()" value="{[{lbs_needed}]}" placeholder="0">
    </div>
</form>

Answer 1

那么，如果我理解正确的话，您希望文本框有一个默认值，但又希望它可以立即更改，而用户不必在默认值上退格？

试试这个:

var input = document.getElementById('change-default');

input.onfocus = function () {
  if (input.value == 0) {
    input.value = '';
  }
}

input.onblur = function () {
  if (input.value == '') {
    input.value = '0';
  }
}

<input type="number" placeholder="0" value="0" id="change-default">

我正在做的是监听 focus 事件，您也可以使用 addEventListener 而不是 onfocus。

如果输入框的值为0，您将删除其值以供用户输入。