0

How do you find out what the user typed or pasted into a textarea? For example, if they typed in B (or β) at index 1, or if they pasted hello world\n at index 23. I've searched a fair bit but can't find anything. Here's what I have so far, uses jQuery:

$("textarea").keydown(function(evt){
    var index= getCaret(this); // this.selectionStart doesn't work in IE
    var key = evt.keyCode; // Wrong.
}

See this question for getCaret. The problem with event.keyCode is non-english keyboard layouts. I'm entirely stuck as far pasting is concerned.

If possible, I'd like to know the values before the textarea is changed - that is, from within the keydown event. I'm not sure if this can be done for pasting.

(Deletion is easier - detect keyCode==8 for backspace and keyCode==46 for del. If selection.length > 0, then the selection is removed; otherwise the character before or after is removed. In theory. There's also the case of pasting on top of a selection.)

Anything that gets any part of this closer to working in any browser is greatly appreciated. That is, how do you know:

  1. the unicode string value of the typed character?
  2. when a paste occurred?
  3. what the text content of the paste is?
Community
  • 1
  • 1
mk.
  • 11,360
  • 6
  • 40
  • 54

1 Answers1

1

I'm not quite sure what your ultimate goal is here, so it's difficult to advise. However, here's some information:

When the user types a character, getting what they typed is easy enough using the keypress event and (assuming your event object is stored in a a variable called evt) using String.fromCharCode(evt.keyCode || evt.which).

For pasting, things are a bit trickier. The simplest thing would be to detect the paste before it has happened, store the textarea's value and after a very short time (using window.setTimeout) compare the new value with the old. As for detecting the paste, a lot of browsers now have the paste event: IE since version 5, Firefox since version 3 and WebKit browsers for a while (not sure exactly when), so you can use that for those browsers. As a fallback for other browsers you could detect Ctrl-V and Shift-Insert in a keydown event handler, though this is by no means foolproof since it won't fire when the user pastes using the Edit menu or the context menu in their browser.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • `evt.which` has the same keyboard layout problem as `evt.keyCode`. I had considered the `setTimout` option (it would solve the layout problem too), but this requires a potentially lengthy comparison for each character typed, and can't be done before the character is entered. In any case, thanks, I've upvoted your answer. – mk. Dec 10 '09 at 20:40
  • `evt.which` is equivalent to `evt.charCode` in the `keypress` event in non-IE browsers, is supported in more browsers and reports the character code rather than the key code, so no keyboard layout problem. This page is a good reference for key events: http://unixpapa.com/js/key.html. The `setTimeout` suggestion was only for pastes, and is not required for each character typed. – Tim Down Dec 10 '09 at 21:33