How to prevent a "0" as the first character when typing in input type number?

Question

I want to prevent 0 as the first character. But when I focusout and focusin again, then I add "2" in the first, it still run, I want should not run.

Here is my HTML

<input type="number" id="test">

My JS

$('#test').keypress(function(evt) {
  if (evt.which == "0".charCodeAt(0) && $(this).val().trim() == "") {
  return false;
   }
});

Anybody help or suggest what should I do? Thank you.

Headstone

Are you trying to prevent the user from entering a value that begins with "0"? (So "02" would not be allowed but "20" would be allowed?) Because if so you can't do that by testing just the current keypress because the user may type the "2" then move the cursor in front of it and type the "0". (Also they may edit the field without using the keyboard, i.e., by pasting or drag'n'drop.) – Cornerstone

why not change the value you get i think if you parse(parseint for example) in the value the leading zero will be removed – Isoniazid

Hi @Cornerstone yes it was I mean. – Headstone

Answer 1

You can use input event, which also handles pasted values, String.prototype.replace() with RegExp /^0/ to replace all 0 characters found within .value of element

$("#test").on("input", function() {
  if (/^0/.test(this.value)) {
    this.value = this.value.replace(/^0/, "")
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input type="number" id="test">

Unwearied

Hi @Unwearied that is not what I mean. Because I need only number, – Headstone

This gives kind of a weird user experience if the user tries to edit an existing value by entering a zero in the middle, because it moves the cursor to the end of the string. Also, I think the OP wants to allow zeros as long as they're not the first character. – Cornerstone

@Cornerstone "Also, I think the OP wants to allow zeros as long as they're not the first character." Ok. See updated post. Added ^ to beginning of RegExp; initially interpreted requirement for no 0 characters to be able to be entered. Question does not appear to indicate only first character that is 0 should not be allowed? – Unwearied

@dediwibisono See updated post. Added ^ to RegExp – Unwearied

@Unwearied - I wanted to add this edit but it's not long enough! Add + after 0 in case multiple zeroes are pasted, like so this.value = this.value.replace(/^0+/, "") – Gangplank

Hi @Unwearied it's better and thank you for your response, but the character like "e", "-", "+" it must disabled. – Headstone

What do you mean by "disabled"? The characters "e", "-", "+" should not be allowed at all? – Unwearied

Oh I'm sorry, I mean not allowed character like "e", "-", "+" and only number (0-9). Yes I try using Regex @Unwearied – Headstone

@dediwibisono Note, requirement "I mean not allowed character like "e", "-", "+"" does not appear at original Question. See stackoverflow.com/help/how-to-ask – Unwearied

Answer 2

Compare which property with the ASCII code of number 0 and return false.

if (evt.which === 48) {
  return false;
}

Check Fiddle

Misrule

Hi @Sushanth thank you for the answer. I'm sorry but I want to clear my question. your answer is disabled all "0". I mean "0" is only disabled in the first. When I typing "0" for the next it should be run. I hope you understand my question Thank you :) – Headstone

Isn't the OP's code already making this comparison with the "0".charCodeAt(0) check? – Cornerstone

Answer 3

$('#test').on("keypress",function (evt) {
   if (this.value.length == 1 && evt.which == 48 )
   {
      evt.preventDefault();
   }
});

Vex

You'll be able to type 0 at the beginning if there's already some value (ex. type 77, move caret to the beginning, type 0) – Alf

Answer 4

Try

  if (event.target.value.length == 0 && event.which == 48) {
  return false;
   }

Brunhilde

Answer 5

You can simply add condition for this block "0" from first character using --> event.target.value. Here is the following code for block "0" from first character.

Javascript.

     const handleOnchange =()=>{
       if(event.target.name === "myEvent"){
         event.target.value === event.targe.value.replace(/^0/, "");
      }
    }

HTML.

<input type="number" name="myEvent" id="myEvent" onChange={handleOnchange} />

Panelboard