Question

我们使用此代码通过 Enter 键模拟 Tab 键：

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

但是在IE 11 keyCode 只读，此代码无效。我如何解决我的代码在IE 11中运行的问题？

Answer 1

keyCode 应该在所有现代浏览器中只读取，因为修改它是hacky且不必要的。查看您在其他问题中提供的代码：keydown event does not fire correctly using jQuery trigger，我们可以模仿此功能，而不是尝试返回更改后的事件。

jQuery实际上让我们在传递给jQuery事件处理程序时修改event对象。正如你jquery标记的那样，我们可以在我们的答案中使用它，将修改传递给在同一元素上调用的trigger()。

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;
}

注意：我使用e.which而不是e.keyCode，因为jQuery会在所有浏览器中对此进行规范化。

这是一个演示，展示了这一点。如果在input元素处于焦点时按 Enter 键，则事件将替换为 Tab 事件：

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>

正如我在my answer here中提到的那样，仅仅是因为你正在改变事件并不意味着你的浏览器会像处理 Tab 键一样处理它。日志记录让我们知道我们的事件已成功拦截并且已经从 Enter 更改为 Tab ，即使在Internet Explorer 11上也是如此。

IE11 Example

Answer 2

我们使用此代码用Enter键模拟Tab键：
  ...
  当我点击Enter时，我希望焦点转到下一个控件。

这个想法是错误的。不要改变输入标签。通过拦截回车键来解决这个问题，将焦点设置在下一个元素上并取消该事件。 jQuery解决方案：

＆＃13;

$(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");
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

jsFiddle for testing in Internet Explorer

Answer 3

这在IE9中有效但在IE11中不再有效。所以你必须找到一个可以刺激你想要的结果的解决方案。例如，如果你想让用户按'Enter'转到下一个数据输入字段（像标签一样），尝试这样的事情。

var i = 0;
var els = myform.getElementsByTagName('input').length
document.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>
<form name="myform">
  <input type="text">
  <input type="text">
  <input type="text">
</form>

jQuery示例：

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

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

Answer 4

您可以在捕获Enter键后选择下一个或上一个表单元素。

这将捕获所有可能的表单元素。按shift-Enter会将焦点移动到上一个表单元素。

按提交按钮上的Enter仍将提交表单。按shift-Enter将聚焦上一个表单元素。

function EnterTabTest(event) 
    {
    if (!event.shiftKey && (event.target.getAttribute('type')=='submit')) return true;

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


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

</form>

Here is a fiddle so you can try

它也适用于IE11，我试过了。

替换IE 11中的keyCode

4 个答案: