1

In html,I want to make input allow digits only. I know there is a onkey(up|press|down) event,but if you tried then you know that one digit that you pressed first will show its face for a second which would not look beautiful. So how to make it(the question in the title)?----that means if you press a non-numeric word with your keyboard,then the input tag respond nothing. I thought to capture the even that a word is produced and about to show its face in input tag, but I didn't find the document about that even.

IsEE
  • 45
  • 6

2 Answers2

1

The keyup event fires only after the keyboard key has been released, and then the character has made its way into the textarea/input element already.

keydown on the other hand fires as soon as the key is pressed, and if you cancel the event then, the charater will not even be inserted into the input field in the first place.

Make sure to handle this carefully though, so that you do not eliminate other key presses that the user might need to use the input field, like f.e. the cursor keys or ins/del etc.

(And you might want to add additional validation/sanitization of the value before it gets submitted or otherwise used, because the value could get into the input field in other possible ways that key events would not catch, such as f.e. paste triggered via context menu.)

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • I have tried to capture the onkeydown event. But if the first word you input is non-numeric,then it appears.So it won't work for the first word you input. – IsEE Jan 25 '15 at 16:36
  • The you are probably doing it wrong … – CBroe Jan 25 '15 at 16:48
  • Finally figured that out, I added code "alert('a')" before the function capturing onkeydown returns, then it didn't work. After I delete that alert code, it works fine.
    PS. the event is not canceling, but working till end then return a signal 'false' to stop the next step     – IsEE Jan 25 '15 at 18:10
0

You can't 100%. I can always disable or edit any JavaScript code you write, so you better not rely on this check alone for validation, always validate server side too.

As for doing client-side validation, modern browsers have that functionality built in, you use the type attribute on the <input> and set it to number, like so:

<form>
  <p>Try to enter a non number and submit.</p>
  <input type="number">
  <button>Submit</button>
</form>
Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • I changed the type of input just now, then the input just appears with two extra buttons to plus or minus, and you can still input non-numeric words. – IsEE Jan 25 '15 at 16:17
  • 1
    Yes, but you can't submit the form. This is free functionality the browser gives you, so that you don't have to implement it. Violently interfering with that the user types is not good for UX. – Madara's Ghost Jan 25 '15 at 16:17
  • I changed the type of input just now, then the input just appears with two extra buttons to plus or minus, and you can still input non-numeric words.
    I want that JS just to format the words users write, so they won't bother deleting the non-numeric they pressed which will be an exactly wrong code.     – IsEE Jan 25 '15 at 16:23
  • I mean that JS will be a helpful tool not a checking system. – IsEE Jan 25 '15 at 16:25