javascript - input type="number" is not able to deleteclear on selecting the number in Firefox and IE - Stack

admin管理员组

文章数量:1287579

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: /

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/MariNithya/fpd2y4f4/

• javascript
• html
• angularjs

Share Improve this question Follow edited Jan 8, 2019 at 13:11 Cœur 38.7k2626 gold badges203203 silver badges277277 bronze badges asked Nov 17, 2017 at 6:09 N15N15 30522 gold badges44 silver badges1717 bronze badges 2

• fiddle link broken. – Rajkumar Somasundaram Commented Nov 17, 2017 at 6:12
• now, fiddle is working. – N15 Commented Nov 17, 2017 at 6:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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

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.

本文标签：