how to capture key repeats with javascript

Question

i have an asp.net form and an asp:textbox. i have a problem when the user presses and HOLDS a key down. the user selects the text box and then presses and holds '9' until the text box fills with 9s.

Is there any way to detect this situation? Is there a way to stop key repeats when the key is held down?

Why don't you just validate the field when submitting the form? I mean, what difference does it make for you whether the field was filled by holding key down or hitting repeatly? — jholster, Mar 29 '10 at 18:44
the field has to accept 12 digits if the number starts with a '2', but the field only accepts 9 digits for all other numbers. Oh, the difficult part? when you hit the character limit, it needs to make an ajax call to do a search. When the user holds down the number key, it skips the 9 digit search. — yamspog, Mar 29 '10 at 19:56

dochoffiday · Accepted Answer · 2010-04-01T15:52:16.480

2

Using jquery, you could do something like this:

<script type="text/javascript">

    var allowKey = true;

    $(function () {
        $("#one").keydown(function (e) {
            if (!allowKey) {
                e.preventDefault();
            }
            allowKey = false;
        });

        $("#one").keyup(function () {
            allowKey = true;
        });
    });

</script>

<input id="one" />

UPDATED BUG FIXES:

    var keyCount = 0;
    $(function () {
        $("#one").keypress(function (e) {
            if (keyCount > 1) {
                e.preventDefault();
            }
            keyCount++;
        });

        $("#one").keyup(function () {
            keyCount = 0;
        });
    });

edited Apr 01 '10 at 15:52

answered Mar 29 '10 at 18:53

dochoffiday

5,515
6
32
41

1

This behaves slightly oddly, in that if you hit a key and then hit another key before releasing the first, you get no character for the second keypress. Also, `keypress` is the safer event to use, since some browsers (all versions of Opera, Safari prior to version 3.1, Firefox on the Mac: this answer won't work on any of them) do not generate `keydown` events for autorepeated keypresses. – Tim Down Apr 01 '10 at 14:19
That's a good point. There are also some other oddities, like pressing SHIFT + another key. Using keypress and a count rather than true/false seems to remedy most of these quirks. – dochoffiday Apr 01 '10 at 15:51
You can allow for multiple keys by using an array (`keyIsPressed = []`) and `keyCode`: `keyIsPressed[e.keyCode] = true`. Unset values will be converted to false. – Brian McCutchon Aug 08 '13 at 19:47

Tim Down · Answer 2 · 2013-05-07T09:08:09.427

The following prevents autorepeated keypresses for "normal" keys (i.e. those that generate text input), even when several keys are pressed simultaneously. Note that the keypress event is the only event sure to be fired in all mainstream browsers for autorepeats and the keyCode value for a keydown event will not be the same as the charCode / which value for the corresponding keypress event, which complicates things a little.

Demo: http://jsfiddle.net/KRJ5m/

Code:

var textBox = document.getElementById("my_textbox");

var lastKeyDown, keyIsPressed = {}, keyCodeForCharCode = {},
    charCodeForKeyCode = {};

textBox.onkeydown = function(evt) {
    evt = evt || window.event;
    lastKeyDown = evt.keyCode;
};

textBox.onkeyup = function(evt) {
    evt = evt || window.event;
    var charCode = charCodeForKeyCode[evt.keyCode];
    if (charCode) {
        keyIsPressed[charCode] = false;
    }
};

textBox.onkeypress = function(evt) {
    evt = evt || window.event;
    var keyCode, charCode = evt.which || evt.keyCode;

    if (keyIsPressed[charCode]) {
        // This keypress is an autorepeat
        return false;
    } else {
        keyIsPressed[charCode] = true;

        // Get the key code for the corresponding keydown event
        keyCode = keyCodeForCharCode[charCode];
        if (!keyCode) {
            // Create two-way mapping for keyCode and charCode
            keyCodeForCharCode[charCode] = lastKeyDown;
            charCodeForKeyCode[lastKeyDown] = charCode;
        }
    }
};

The keyCode for a keypress will not be the same as the keyCode for the corresponding keypress? Was one of these supposed to be keydown instead of keypress? Or charCode instead of keyCode? — jalf, May 07 '13 at 07:41
@jalf: Good question. Not my finest piece of writing. I'll try and work out what I meant and correct it. — Tim Down, May 07 '13 at 09:04

score 0 · Answer 3 · answered Mar 29 '10 at 18:48

Using YUI's event handler, you could do something like this

var count = 0;
var kl = new YAHOO.util.KeyListener(document,{keys:27},                               
    {
      fn:function(e){
         if (count > 9){
            YAHOO.util.Event.preventDefault(e);
            // call a function here to do something
         }
         else count++;
      }
);

That would do the trick, then once your done your action, ensure count gets set back to 0.

Here is the link to the example http://developer.yahoo.com/yui/examples/container/keylistener.html

score 0 · Answer 4 · answered Mar 29 '10 at 19:20

This is a simple example of how I would lock down the key repetition with plain javascript:

var lock = false;

document.onkeyup = onKeyUpHandler;
document.onkeypress = onKeyPressHandler;

function onKeyUpHandler() {
    lock = false;
}

function onKeyPressHandler(e) {
    if (!e)
        e = window.event;
    var code = e.keyCode || e.which;
    if (lock != false) {
        e.returnValue = false;
        if (e.preventDefault) {
            e.preventDefault();
        }
    }   
    lock = true;
}

how to capture key repeats with javascript

4 Answers4

Linked