Question

is it possible to still display the placeholder text IF the value is equal to the minimum value?

For this code

<input type="number" class="normal form-control no-padding ta-right" id="spreadThisTotal" min="0" value="0" placeholder="Amount to be allocated"/>

Can this be done with just html5? Or would this manipulation really have to be done with javascript?

Thanks!

Answer 1

我认为这里需要一些操作是一个javascript解决方案

如果用户点击输入框并且最小值为当前值，则会添加占位符。

如果用户键入值，则会触发单击

    function func(e) {
      if(e.target.value==e.target.getAttribute("min")){
      e.target.value="";
      }
    }
    document.getElementById("spreadThisTotal").addEventListener('click', func);
    document.getElementById("spreadThisTotal").addEventListener('keyup', function(e){e.target.click()})

    <input type="number" class="normal form-control no-padding ta-right" id="spreadThisTotal" min="0" value="0" placeholder="Amount to be allocated" />

Answer 2

尝试以下解决方案：

document.getElementById('spreadThisTotal').addEventListener('keyup', checkValue);
function checkValue(event){
  if(event.target.value == 0){
    document.getElementById('spreadThisTotal').value = null;
  }
}

<input type="number" class="normal form-control no-padding ta-right" id="spreadThisTotal" min="0" value="0" placeholder="Amount to be allocated"/>

Placeholder display if value = 0

2 个答案: