Only allow numbers in an input with javascript and allow copy and paste?

Question

I'm using this function to only allow numbers in a text input.

$('input').bind('keydown', function(e) {

    var key = e.charCode || e.keyCode || 0;

    return (
         key == 8 ||
         key == 9 ||
         key == 46 ||
         (key >= 37 && key <= 40) ||
         (key >= 48 && key <= 57) ||
         (key >= 96 && key <= 105));
});

How would I also allow copy and paste? I've tried adding keycode 17 for control but it still doesn't work.

Is there something special you have to do for key combinations?

Thanks

Isn't that first line a jQuery selector? Shouldn't this have, at least, a jQuery tag? — Adam, Jul 15 '10 at 16:27
or is the tag reserved for questions specific to jQuery? (just curious) — Adam, Jul 15 '10 at 16:28
@advs89 think about it again (and don't be lazy to read the full question not just the first line...) — gblazex, Jul 15 '10 at 16:28
I don't fully understand: why would you want to prevent people typing in non-numeric characters but then allow them to paste in whatever they want? — Tim Down, Jul 15 '10 at 21:29
I imagine the asker wanted the clipboard data validated as well... (i.e. no non-numeric characters) — Adam, Jul 16 '10 at 03:18
@galambalazs: I did read the whole thing... am I missing something? — Adam, Jul 16 '10 at 03:22
(I even checked to make sure it wasn't pure Javascript, but it obviously isn't because that's why we have to use Document.getElementById(string) function) — Adam, Jul 16 '10 at 03:23
$() and .bind() are both used in jQuery... as is everything else in that code. — Adam, Jul 16 '10 at 03:26
@advs89 :) Yes they are but the question actually has nothing to do with jQuery. :) It's about validating an input field real-time. e.g.: He may be using Windows to develop his site but yet the windows tag would be useless in this question. Similarly he uses jQuery but it has nothing to do with the actual question. — gblazex, Jul 16 '10 at 09:30
galambalazs: It has a little to do with it: event handling is slightly different in jQuery compared to without. — Tim Down, Jul 16 '10 at 13:22
@galambalazs: that was why I wrote my second comment asking "or is the tag reserved for questions specific to jQuery?" According to your most recent comment, it sounds like you're saying that the jQuery tag is reserved for questions that are specific to jQuery. (which this question isn't) — Adam, Jul 17 '10 at 02:30

gblazex · Answer 1 · 2010-07-15T16:30:47.650

5

You better off with something like:

$('input').bind('keyup', function(e) {
  this.value = this.value.replace(/[^0-9]/g,'');
});

Or you can also use the change event. In this case no matter how the data gets into the field it will be validated (and non numeric input removed).

edited Jul 15 '10 at 16:30

answered Jul 15 '10 at 16:25

gblazex

49,155
12
98
91

+1 for the simplicity and foolproofness of using the `change` event. – Tim Down Jul 16 '10 at 08:20
Weird behavior and bad UX when you see incorrect input for a moment and then after some time it disappears. – Maksim Shamihulau Nov 27 '22 at 09:35

score -1 · Answer 2 · answered Jul 15 '10 at 16:15

-1

Keep a record of the last keycode pressed. Since you're using onkeydown, a cmd-v would show up as an event with keycode 224 (cmd) and then an event with keycode 86 (v). If the previous key matches cmd and the latter v, allow it through.

(you would probably check for ctrl for Windows/Linux pasters as well)

answered Jul 15 '10 at 16:15

Nick

9,792
7
50
60

There are more ways than that to paste: from the context and edit menus, for example. There's also dragging. – Tim Down Jul 16 '10 at 08:19

score -1 · Answer 3 · answered Nov 27 '22 at 09:22

There is input event which is more powerful/flexible than keypress, keydown or change, that reacts on any type of change: program or user type such as key presses or copy/paste events.

// Initial valid input state
let prevValue = ''
let prevSelectionStart = 0

function allowNumbersOnly(event) {
  const input = event.target
  let value = event.target.value

  // Check if value is number
  let isValid = +value == +value

  if (isValid) {
    // preserve input state
    prevValue = value
    prevSelectionStart = input.selectionStart
  } else {
    // restore previous valid input state.
    // we have to fire one more Input event in  order to reset cursor position.
    var resetEvent = new InputEvent('input')
    input.value = prevValue
    input.selectionStart = prevSelectionStart
    input.selectionEnd = prevSelectionStart
    input.dispatchEvent(resetEvent)
  }
}

<input type="text" oninput="allowNumbersOnly(event)">

Only allow numbers in an input with javascript and allow copy and paste?

3 Answers3

Linked