Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Replace keyCode in IE 11

We use this code for simulating Tab key with Enter key:

function EnterTab() {
    if (event.keyCode == 13) event.keyCode = 9;
    return false;
}

But in IE 11 keyCode is readonly and this code does not work. How I can solve this problem that my code run in IE 11?

like image 985
Arian Avatar asked Oct 18 '14 09:10

Arian


People also ask

What can I use instead of deprecated keyCode?

You should avoid using this if possible; it's been deprecated for some time. Instead, you should use KeyboardEvent. code , if it's implemented. Unfortunately, some browsers still don't have it, so you'll have to be careful to make sure you use one which is supported on all target browsers.

What is e keyCode === 13?

Keycode 13 is the Enter key.

What is the alternative of keyCode?

KeyCode property was deprecated because it has been 'inconsistent across platforms and even the same implementation on different operating systems or using different localizations'. Said that the alternative is to use the ' . key ' property.

What is the difference between keyCode and charCode?

keyCode: Returns the Unicode value of a non-character key in a keypress event or any key in any other type of keyboard event. event. charCode: Returns the Unicode value of a character key pressed during a keypress event.


1 Answers

keyCode should be readonly in all modern browsers, simply because modifying it is hacky and unnecessary. Looking at the code you provided in your other question: keydown event does not fire correctly using jQuery trigger, we can imitate this functionality rather than attempt to return the altered event.

jQuery actually does let us modify the event object when it is passed in to a jQuery event handler. As you have jquery tagged, we can therefore make use of this in our answer, passing the modifications into a trigger() called on the same element.

if (e.which === 13) {
    // Alter the normalised e.which property
    e.which = 9;

    // Alter the default properties for good measure
    e.charCode = 9;
    e.keyCode = 9;

    $(this).trigger(e);
    return false;
}

Note: I've used e.which rather than e.keyCode as jQuery normalises this across all browsers.

Here is a demo which shows this in action. If you press the Enter key when the input element is in focus, the event will be replaced with the Tab event:

var $input = $('input'),
    $p = $('p');

$input.on('keydown', function(e) {
    if (e.which == 13) {  
        $p.html($p.html() + 'Enter key intercepted, modifying 13 to 9.<br>');
                
        e.which = 9;
      
        e.charCode = 9;
        e.keyCode = 9;
      
        $(this).trigger(e);
      
        return false;
    }
  
    $p.html($p.html() + 'Key pressed: ' + e.keyCode + '<br>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" />
<p></p>

As I've mentioned in my answer here, just because you're changing the event doesn't mean your browser is then going to handle it as if the Tab key has been pressed. The logging lets us know that our event has successfully been intercepted and changed from Enter to Tab, even on Internet Explorer 11.

IE11 Example

like image 165
James Donnelly Avatar answered Oct 16 '22 00:10

James Donnelly