Catch ENTER key to behave like TAB

There was a lot of solution suggestion on the net but none solved my problem with IE which had problem when input text field was followed by non text input field (like checkbox) and the text in the field was selected. In this case without adding an empty selectionRange the selection highlight stayed even when other input had focus. That is why I have created this full working example.

by Miklós Kriván

HTML

<body>
  <form style="margin:1em" method="POST">
    <table>
      <tr>
        <td>A1:</td>
        <td>
          <input type="text" name="a1" />
        </td>
      </tr>
      <tr>
        <td>B1:</td>
        <td>
          <input type="text" name="b1" />
        </td>
      </tr>
      <tr>
        <td>C1:</td>
        <td>
          <input type="checkbox" name="c1" />
        </td>
      </tr>
      <tr>
        <td>D1:</td>
        <td>
          <input type="text" name="d1" disabled="disabled" />
        </td>
      </tr>
      <tr>
        <td>E1:</td>
        <td>
          <input type="text" name="e1" />
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="submit" value="Submit 1" />
        </td>
      </tr>
    </table>
  </form>
  <form style="margin:1em" method="POST">
    <table>
      <tr>
        <td>A2:</td>
        <td>
          <input type="text" name="a2" />
        </td>
      </tr>
      <tr>
        <td>B2:</td>
        <td>
          <input type="text" name="b2" />
        </td>
      </tr>
      <tr>
        <td>C2:</td>
        <td>
          <input type="checkbox" name="c2" />
        </td>
      </tr>
      <tr>
        <td>D2:</td>
        <td>
          <input type="text" name="d2" disabled="disabled" />
        </td>
      </tr>
      <tr>
        <td>E2:</td>
        <td>
          <input type="text" name="e2" />
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="submit" value="Submit 2" />
        </td>
      </tr>
    </table>
  </form>
</body>

JavaScript

function clearSelection() {
              if (document.getSelection) { // for all new browsers (IE9+, Chrome, Firefox)
                document.getSelection().removeAllRanges();
                document.getSelection().addRange(document.createRange());
                console.log("document.getSelection");
              } else if (window.getSelection) { // equals with the document.getSelection (MSDN info)
                if (window.getSelection().removeAllRanges) { // for all new browsers (IE9+, Chrome, Firefox)
                  window.getSelection().removeAllRanges();
                  window.getSelection().addRange(document.createRange());
                  console.log("window.getSelection.removeAllRanges");
                } else if (window.getSelection().empty) { // Chrome supports this as well
                  window.getSelection().empty();
                  console.log("window.getSelection.empty");
                }
              } else if (document.selection) { // IE8-
                document.selection.empty();
                console.log("document.selection.empty");
              }
            }

            function focusNextInputElement(node) { // instead of jQuery.tabNext() which had problem with IE when input text was followed by non text input (checkbox, button etc.)
              // TODO: take the tabindex into account if defined
              if (node !== null) {
                // stay in the current form
                var inputs = $(node).parents("form").eq(0).find(":input:visible:not([disabled]):not([readonly])");
                // if you want through the full document (as TAB key is working)
                // var inputs = $(document).find(":input:visible:not([disabled]):not([readonly])");
                var idx = inputs.index(node) + 1; // next input element index
                if (idx === inputs.length) { // at the end start with the first one
                  idx = 0;
                }
                var nextInputElement =...