Add placeholder instead of value in number and range input when value is 0 - Angular.js

Question

I have a number and range input that are working in unison using same value using Angular.js value. When the value is set to 0 (which is what it is by default when page loads $scope.lbs_needed = 0; , I want to show a placeholder="0" whenever the value of the number or range input is set to 0 that way the 0 value isn't in front of the user's input without them having to manually delete default 0.

Here's my 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

So, if I understand correctly you want the textbox to have a default value but also want it to be changeable instantly without users having to backspace over the default?

Try this:

 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"> 

What I'm doing is listening for an focus event, you could also use addEventListener instead of onfocus .

If the value of the input box is 0 you remove its value ready for the user to type theirs in.