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

Solution 1:

keyCodeshould 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);
    returnfalse;
}

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);
      
        returnfalse;
    }
  
    $p.html($p.html() + 'Key pressed: ' + e.keyCode + '<br>');
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><inputtype="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.

Solution 2:

We use this code for simulating Tab key with Enter key: ... When I hit Enter I want focus go to next control.

The idea is wrong. Don't change enter to tab. Tackle this problem by intercepting the enter key, set the focus on next element and cancel the event. jQuery solution:

$(function() {
  $("form").on("keypress", "input[type=text], select, textarea", function(e) {
    if (e.which === 13) {
      e.preventDefault();
      var $fields = $(this).closest("form").find(":input");
      var index = $fields.index(this);
      $fields.eq(index + 1).trigger("focus");
    }
  });
});

input,
select,
textarea {
  box-sizing: border-box;
  margin: .5em0;
  width: 100%;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><formmethod="post"><p>Hitting enter inside the text fields will not submit the form</p><textarearows="4"></textarea><inputtype="text" /><select><option>1</option><option>2</option><option>3</option></select><select><option>A</option><option>B</option><option>C</option></select><inputtype="text" /><inputtype="submit"value="sumbmit" /></form>

jsFiddle for testing in Internet Explorer

Solution 3:

This worked in IE9 but no longer works in IE11.So you have to find a solution that stimulates the result you want.For example, if you want to allow users to press 'Enter' to go to the next data entry field (like tab does), try something like this.

var i = 0;
var els = myform.getElementsByTagName('input').lengthdocument.onkeydown = function(e) {
  e = e || window.event;
  if (e.keyCode == 13) {
    i++;
    i > els - 1 ? i = 0 : i = i;
    document.myform[i].focus();

  }
};

<span>Press 'enter' inside text to act like tab button</span><formname="myform"><inputtype="text"><inputtype="text"><inputtype="text"></form>

jQuery Example:

$('.info').bind('keypress', function(event) {
  if (event.which === 13) {
    var nextItem = $(this).next('.info');

    if (nextItem.size() === 0) {
      nextItem = $('.info').eq(0);
    }
    nextItem.focus();
  }
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text"class="info" /><inputtype="text"class="info" /><inputtype="text"class="info" />

Solution 4:

You can just select the next or previous form element after catching the Enter key.

This will catch all possible form elements. Pressing shift-Enter will move the focus to the previous form element.

Pressing Enter on the submit button will still submit the form. Pressing shift-Enter will focus the previous form element.

functionEnterTabTest(event) 
    {
    if (!event.shiftKey && (event.target.getAttribute('type')=='submit')) returntrue;

    event.preventDefault();
    if (event.keyCode == 13)
        {
            if (event.shiftKey)
                $(event.target).prevAll(":input").first().focus();
            else
                $(event.target).nextAll(':input').first().focus();
        }
    returnfalse;
    }


<form onkeydown='EnterTabTest(event)'>
    <inputtype='text' /><inputtype='text' /><inputtype='text' /><p>not part of the form</p><select><option>opt1</option><option>opt2</option></select><p>also not part of the form</p><inputtype='text' /><inputtype='submit' />

</form>

Here is a fiddle so you can try

It also works in IE11, I tried.