Javascript 如何在IE9中将Enter转换为Tab（焦点更改）？它在IE8中起作用

我有一个带有onkeydown事件处理程序的文本输入，它通过将事件的keyCode从13更改为9来转换为

<input type="text" onkeydown="enterToTab(event);" onchange="changeEvent(this);" 
       name="" value="" />
<!-- Other inputs exist as created via the DOM, but they are not sibling elements. -->

在IE8中，这导致onchange事件触发，但在IE9中不会发生这种情况。相反，输入字段保留焦点。我怎样才能做到这一点？（它可以在Firefox 3.6和Chrome 10.0中使用。）如果我将文档模式设置为“IE8标准”，它甚至可以在浏览器模式IE9中使用。但它不能与“IE9标准”的文档模式一起工作。（我的DocType是XHTML 1.0过渡版。）

由于它在IE7和IE8中工作，这可能是IE9中的一个bug，可以得到修复吗

请注意：我无法使用

input.blur（）

或手动设置新的焦点，这是我读过的所有其他解决方案建议的。我已经试过onkeypress和onkeyup，但都没有成功。我需要一个通用的解决方案，这将导致网络应用程序的字面行为，好像我击中了。另外，我没有jQuery，但是Dojo1.5对我来说是可用的

另请注意：我知道这是“错误”的行为，因此Enter应该提交表格。然而，我的客户的员工最初来自一个绿色屏幕环境，在那里Enter可以在字段之间移动他们。我们必须保留相同的UI。事实就是这样

---

更新：我发现IE8和IE9之间存在差异。在IE8中，我的

myEvent.keyCode

设置保持不变。在IE9中，它不是。我可以更新

window.event.keyCode

，它将保持不变，但这不会影响以后发生的事情。啊。。。有什么想法吗？

看起来IE9事件是不可变的。一旦它们被触发，您就无法更改它们的属性，只需preventDefault（）或取消它们即可。因此，您最好的选择是取消任何“enter”事件，并从文本输入中重新分派一个新的DOM事件

范例

function enterToTab(event){
    if(event.keyCode == 13){
        var keyEvent = document.createEvent("Event");
        // This is a lovely method signature
        keyEvent.initKeyboardEvent("onkeydown", true, true, window, 9, event.location, "", event.repeat, event.locale);
        event.currentTarget.dispatchEvent(keyEvent);
        // you may want to prevent default here
    }
}

以下是有关IE9 DOM事件的MSDN文档：

事件对象-

createEvent-

---

初始化键盘事件-

以前的IE版本允许非标准可写

事件。keyCode

属性，IE9现在符合标准

你可能想考虑一下你的功能：你想让Enter键像Tab键一样，即把焦点移到下一个（文本）输入字段。有更多的方法可以做到这一点。其中之一是使用文本输入字段的

tabindex

属性。如果使用这个tabindex属性对表单中的字段进行排序，那么我在这里介绍的函数可能会产生与前面的keyCode方法相同的结果。这里有两个我测试过的函数。（文本）输入字段现在看起来像：

<input type="text" 
       onkeypress="nextOnEnter(this,event);" 
       name="" value="" 
       tabindex="1"/>

用于制表符的功能包括：

function nextOnEnter(obj,e){
    e = e || event;
    // we are storing all input fields with tabindex attribute in 
    // a 'static' field of this function using the external function
    // getTabbableFields
    nextOnEnter.fields = nextOnEnter.fields || getTabbableFields();
    if (e.keyCode === 13) {
        // first, prevent default behavior for enter key (submit)
        if (e.preventDefault){
            e.preventDefault();
        } else if (e.stopPropagation){    
          e.stopPropagation();
        } else {   
          e.returnValue = false;
        }
       // determine current tabindex
       var tabi = parseInt(obj.getAttribute('tabindex'),10);
       // focus to next tabindex in line
       if ( tabi+1 < nextOnEnter.fields.length ){
         nextOnEnter.fields[tabi+1].focus();
        }
    }
}

// returns an array containing all input text/submit fields with a
// tabindex attribute, in the order of the tabindex values
function getTabbableFields(){
    var ret = [],
        inpts = document.getElementsByTagName('input'), 
        i = inpts.length;
    while (i--){
        var tabi = parseInt(inpts[i].getAttribute('tabindex'),10),
            txtType = inpts[i].getAttribute('type');
            // [txtType] could be used to filter out input fields that you
            // don't want to be 'tabbable'
            ret[tabi] = inpts[i];
    }
    return ret;
}

功能下一个输入（obj，e）{
e=e | |事件；
//我们使用tabindex属性存储所有输入字段
//使用外部函数的此函数的“静态”字段
//gettabablefields
nextOnEnter.fields=nextOnEnter.fields | | gettabablefields（）；
如果（如keyCode===13）{
//首先，防止enter键的默认行为（提交）
如果（如默认）{
e、 预防默认值（）；
}否则如果（如停止传播）{
e、 停止传播（）；
}否则{
e、 returnValue=false；
}
//确定当前选项卡索引
var tabi=parseInt（obj.getAttribute（'tabindex'），10）；
//聚焦到行中的下一个选项卡索引
if（tabi+1

如果您不想使用tabindex，并且所有输入字段都是“tabbable”

---

[EDIT]编辑函数（参见jsfiddles）以利用事件委派，并使其在Opera中也能正常工作。而且还模仿了shift标签。

这里有一个不同的想法；更改提交时的，以便它调用函数而不是处理表单。在函数中，检查所有字段是否为空，然后关注下一个没有值的字段。
因此，他们在字段1中键入一个值，按enter键，函数运行。它看到字段1已满，但字段2未满，因此请关注字段2。
然后，当所有字段都已满时，提交表单进行处理。
如果表单中的字段可以为空，则可以使用一个布尔数组，通过onfocus（）事件跟踪哪些字段接收到焦点

仅仅是一个开箱即用的想法。

页面上的

元素将导致此问题

在IE9中，按下Enter键时，一个

元素占据焦点。任何提交或重置按钮也会导致问题。如果未使用提交/重置，则可以通过将所有按钮更改为

或设置为按钮来解决此问题。i、 e

<button type="button">Click me!</button>

---

上面的代码会导致问题。这里有一些代码可以帮助您。在IE9、FF5等方面开展工作

function getNextElement(field) {
    var form = field.form;
    for ( var e = 0; e < form.elements.length; e++) {
        if (field == form.elements[e]) {
            break;
        }
    }
    return form.elements[++e % form.elements.length];
}

function tabOnEnter(field, evt) {
if (evt.keyCode === 13) {
        if (evt.preventDefault) {
            evt.preventDefault();
        } else if (evt.stopPropagation) {
            evt.stopPropagation();
        } else {
            evt.returnValue = false;
        }
        getNextElement(field).focus();
        return false;
    } else {
        return true;
    }
}

函数getNextElement（字段）{
var form=field.form；
for（var e=0；e<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>IE problem with Enter key and &lt;button&gt; elements</title>
</head>

<body>
    <script>
        function press(event) {
            if (event.keyCode == 13) {
                document.getElementById('input2').focus();
                // In IE9 the focus shifts to the <button> unless we call preventDefault(). Uncomment following line for IE9 fix. Alternatively set type="button" on all button elements and anything else that is a submit or reset too!.
                // event.preventDefault && event.preventDefault();
            }
        }
    </script>
    <input id="input1" type="text" onkeypress="press(event)" value="input1. Press enter here." /><br />
    <input id="input2" type="text" value="input2. Press enter here." /><br />
    <input  id="button1" type="button" value='I am an <input type="button">' /><br />
    <button id="button2" type="button">I am a &lt;button type="button"&gt;</button><br />
    <button id="button3">I am a &lt;button&gt;. I get focus when enter key pressed in IE9 - wooot!</button><span>As per Microsoft docs on <a target="_tab" href="http://msdn.microsoft.com/en-us/library/ms534696%28v=vs.85%29.aspx">BUTTON.type</a> it is because type defaults to submit.</span>
</body>
</html>

function getNextElement(field) {
    var form = field.form;
    for ( var e = 0; e < form.elements.length; e++) {
        if (field == form.elements[e]) {
            break;
        }
    }
    return form.elements[++e % form.elements.length];
}

function tabOnEnter(field, evt) {
if (evt.keyCode === 13) {
        if (evt.preventDefault) {
            evt.preventDefault();
        } else if (evt.stopPropagation) {
            evt.stopPropagation();
        } else {
            evt.returnValue = false;
        }
        getNextElement(field).focus();
        return false;
    } else {
        return true;
    }
}

<input type="text" id="1" onkeydown="return tabOnEnter(this,event)"/>
<input type="text" id="2" onkeydown="return tabOnEnter(this,event)"/>
<input type="text" id="3" onkeydown="return tabOnEnter(this,event)"/>
<input type="text" id="4" onkeydown="return tabOnEnter(this,event)"/>

return form.elements[++e % form.elements.length]; 

e++;
while (form.elements[e % form.elements.length].type == "hidden") {
    e++;
}
return form.elements[e % form.elements.length];

<asp:TextBox ID="txtInputText" runat="server" Text="Please enter some text" onpaste="return textboxMultilineMaxNumber(this,1000);" onkeypress="return textboxMultilineMaxNumber(this,1000);"></asp:TextBox>

function stopRKey(evt) 
{ 
  var evt = (evt) ? evt : ((event) ? event : null); 
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
  if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio")))  
  { 
      getNextElement(node).focus();  
      return false;   
    } 
} 

function getNextElement(field) 
{
    var form = field.form;
    for ( var e = 0; e < form.elements.length; e++) {
        if (field == form.elements[e]) {
            break;
        }
    }
    e++;
    while (form.elements[e % form.elements.length].type == "hidden") 
    {
        e++;
    }
    return form.elements[e % form.elements.length];;
}