input type="number" is not able to delete/clear on selecting the number in Firefox and IE

user_8591497 0
Viewed 12065

I have validation to accept the min and max value for an input type="number" field. Once I entered some input it is working according to the max and min value. What is my problem is I could not able to clear/delete an entered value in the number field. In textbox field, it is allowing to clear the value by using backspace and selecting the number and type new number. why number field is not working in that scenario. how to make it clear/delete the number in the number field.

  <input type="number" name="WorkingDaysPA" id="WorkingDaysPA"
             min="1" max="366" style="text-align: right"

             onkeypress="if(this.value.length==3) return false;return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57"
         />

<input type="text" maxlength="3" min="1" max="366">

Here My fiddle: https://jsfiddle.net/MariNithya/fpd2y4f4/

angularjs html javascript
2 Answers

On focus out event, I am assiging null as value;

Hope this helps

document.getElementById("validateNums").addEventListener("focusout", inputOutOfFocus);
function inputOutOfFocus() {
 document.getElementById("validateNums").value = null;
}
<input type="number" maxlength="3" min="1" max="366" id="validateNums">

user_39701170

to clear the text field we use document.getElementById("exampleId").textContent = ""; whereas to clear number field use document.getElementById("exampleId").value =null ;

hope this solves your problem.

user_146145850
Related