如何在IE9中转换为Tab(焦点改变)?它在IE8

I have a text input with an onkeydown event handler that converts <Enter> to <Tab> by changing the event's keyCode from 13 to 9.

我有一个带有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. -->

Javascript:

function enterToTab(myEvent) {
    if (myEvent.keyCode == 13) {
        myEvent.keyCode = 9;
    }
}
function changeEvent(myInput) { var test = "hello"; }

In IE8, this caused the onchange event to fire, but that doesn't happen in IE9. Instead, the input field retains focus. How I can I make that happen? (It works in Firefox 3.6 and Chrome 10.0.) This even works in Browser Mode IE9 if I set the Document Mode to "IE8 standards". But it won't work with a Document Mode of "IE9 standards". (My DocType is XHTML 1.0 Transitional.)

在IE8中，这导致了onchange事件的发生，但这在IE9中并没有发生。相反，输入字段保留焦点。我怎么能做到呢?(它适用于火狐3.6和Chrome 10.0。)如果我将文档模式设置为“IE8标准”，这甚至在浏览器模式IE9中也能发挥作用。但它不会使用“IE9标准”的文档模式。(我的DocType是XHTML 1.0过渡版。)

Since it works in IE7 & 8, could this be a bug in IE9 that will get fixed?

因为它在IE7和8中工作，这可能是IE9的一个bug吗?

Please note: I cannot use input.blur() or manually set a new focus, which is advised by all the other solutions that I've read. I've already tried onkeypress and onkeyup with no luck. I need a generic solution that will cause the web app to literally behave as though I'd hit <Tab>. Also, I don't have jQuery, however, Dojo 1.5 is available to me.

请注意:我不能使用input.blur()或手动设置一个新的焦点，这是我读过的所有其他解决方案的建议。我已经试过按键和onkeyup，但没有运气。我需要一个通用的解决方案，它会使web应用程序的行为看起来就像我点击了。另外，我没有jQuery, Dojo 1.5是可用的。

Also note: I KNOW this is "wrong" behavior, and that Enter ought to submit the form. However, my client's staff originally come from a green screen environment where Enter moves them between fields. We must retain the same UI. It is what it is.

还要注意:我知道这是“错误”的行为，而且应该提交表单。但是，我的客户的工作人员最初来自于一个绿色的屏幕环境，在这个环境中，输入在字段之间移动。我们必须保持相同的UI。它就是这样。

UPDATE: I found a difference between IE8 & IE9. In IE8, my setting of myEvent.keyCode holds. In IE9, it does NOT. I can update window.event.keyCode, and it will hold, but that won't affect what happens later. Argh... Any ideas?

更新:我发现IE8和IE9有区别。在IE8中，我的myEvent设置。键码。在IE9中，它没有。我可以更新window.event。keyCode，它会保留，但不会影响以后会发生什么。啊…什么好主意吗?

9 个解决方案

#1

Looks like IE9 events are immutable. Once they've been fired you can't change the properties on them, just preventDefault() or cancel them. So you best option is to cancel any "enter" events and re-dispatch a new DOM event from the text input.

看起来IE9事件是不可变的。一旦他们被解雇了，你就不能更改他们的属性，只是防止默认()或者取消他们。因此，最好的选择是取消任何“enter”事件，并从文本输入重新分派一个新的DOM事件。

Example

例子

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

Here's the MSDN documentation around IE9 DOM events:

以下是关于IE9 DOM事件的MSDN文档:

Event Object - http://msdn.microsoft.com/en-us/library/ms535863(v=vs.85).aspx

事件对象——http://msdn.microsoft.com/en-us/library/ms535863(v = vs.85). aspx

createEvent - http://msdn.microsoft.com/en-us/library/ff975304(v=vs.85).aspx

createEvent——http://msdn.microsoft.com/en-us/library/ff975304(v = vs.85). aspx

initialize a Keyboard Event - http://msdn.microsoft.com/en-us/library/ff975297(v=vs.85).aspx

初始化一个键盘事件:http://msdn.microsoft.com/en-us/library/ff975297(v= vs85)。

#2

Here is a different idea; change the on submit so that it calls a function instead of processing the form. in the function check all the fields to see if they are blank, then focus on the next field that doesn't have a value.
So they type a value into field 1, hit enter, and the function runs. it sees that field 1 is full, but field 2 isn't, so focus on field 2.
Then when all the fields are full, submit the form for processing.
If the form has fields that can be blank, you could use a boolean array that would keep track of which fields received focus using the onfocus() event.

这里有一个不同的想法;更改提交，以便它调用一个函数而不是处理表单。在函数中检查所有字段是否为空，然后关注没有值的下一个字段。因此，它们将一个值输入到字段1中，按回车键，然后运行函数。它看到字段1是满的，但是字段2不是，所以关注字段2。当所有的字段都填满后，提交表单进行处理。如果表单有可以为空的字段，则可以使用一个布尔数组，该数组将跟踪使用onfocus()事件接收焦点的字段。

Just an outside the box idea.

只是一个盒子之外的想法。

#3

The previous IE-version allowed the non standard writable event.keyCode property, IE9 now conforms to the standards.

之前的ie版本允许非标准可写事件。keyCode属性，IE9现在符合标准。

You may want to consider the functionality you are after: you want to make the enter key behave like the tab key, i.e. moving the focus to the next (text) input field. There are more ways to do that. One of them is using the tabindex attribute of the text input fields. If you order the fields in your form using this tabindex attribute, the functions I present here may yield the same result as your previous keyCode method. Here are two functions I tested in this jsfiddle. An (text) input field now looks like:

您可能想要考虑您所追求的功能:您希望使enter键的行为类似于tab键，即将焦点转移到下一个(文本)输入字段。有很多方法可以做到这一点。其中之一是使用文本输入字段的tabindex属性。如果您使用这个tabindex属性命令表单中的字段，那么我在这里展示的函数可能会产生与您以前的keyCode方法相同的结果。这是我在jsfiddle测试的两个功能。一个(文本)输入字段现在看起来是:

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

the functions to use for tabbing:

用于制表的功能:

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

If you don't want to use tabindex and all your input fields are 'tabbable', see this jsfiddle

如果您不想使用tabindex，并且所有输入字段都是' tabable '，请参见这个jsfiddle。

[EDIT] edited functions (see jsfiddles) to make use of event delegation and make it all work in Opera too. And this version imitates shift-TAB too.

[编辑]编辑功能(参见jsfiddles)，利用事件委托，使其在Opera中也能发挥作用。这个版本也模仿shift-TAB。

#4

The code above causes problems. Here's some code that will help you. Works on IE9, FF5 etc.

上面的代码会导致问题。这里有一些代码可以帮助你。工作于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;
    }
}

And then you should just create your input texts or whatever

然后你应该创建你的输入文本之类的。

<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)"/>

#5

A <button> element on a page will cause this problem.

在页面上的 <按钮> 元素将导致这个问题。

In IE9 a <button> element takes the focus when Enter is pressed. Any submit or reset button will cause the problem too. If you are not using submit/reset then you can fix this by changing all buttons to <input type="button"> or by setting the button's type attribute to button. i.e.

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

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

Alternatively as per KooiInc's answer, you can edit your javascript to use event.preventDefault(); to prevent the Enter key acting this way, and explicitly call focus() on the next element in the tab order.

或者按照KooiInc的回答，您可以编辑您的javascript以使用event.preventDefault();为了防止输入键以这种方式出现，并显式地将焦点()命名为tab order中的下一个元素。

Here is some test code I wrote that demonstrates the problem with the button element (note the blue focus ring on button3 in IE9):

下面是我写的一些测试代码，它演示了按钮元素的问题(注意IE9中button3的蓝色焦点环):

<!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>

#6

Mike Fdz's code is superb. In order to skip over hidden fields, you may want to change the line

Mike Fdz的代码非常棒。为了跳过隐藏字段，您可能需要更改该行。

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

to this:

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

#7

Use onpaste along with onkeypress like

和onkeypress一起使用onpaste。

Consider you have wrriten a javascript function which checks the text lenght so we will need to validate it on key press like as below

假设您有一个javascript函数，它检查文本的长度，因此我们需要在如下的关键媒体上验证它。

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

onkeypress will work in both FF and IE

onkeypress将在FF和IE中工作。

but if you try to do ctr+V in textbox then onpaste will handle in IE in FF onkeypress takes care of it

但是如果你尝试在文本框中使用ctr+V，那么onpaste将会处理IE中的IE。

#8

This is what I have done with what I found over the internet :

这就是我通过互联网找到的:

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

#9

To prevent a "submit event" triggered by Enter-Keyboard in your Form in IE9, retire any button inside the form area. Place him (button) in outside of form's area.

为了防止在IE9中以你的形式出现的enter键盘触发的“提交事件”，请在表单区域内关闭任何按钮。把他(按钮)放在表格的区域外。

function enterAsTab() {
  var keyPressed = event.keyCode; // get the Key that is pressed
  if (keyPressed == 13)
  { 
    //case the KeyPressed is the [Enter]
    var inputs = $('input'); // storage a array of Inputs
    var a = inputs.index(document.activeElement); 
    //get the Index of Active Element Input inside the Inputs(array)
    
    if (inputs[a + 1] !== null)
    {
      // case the next index of array is not null
      var nextBox = inputs[a + 1]; 
      nextBox.focus(); // Focus the next input element. Make him an Active Element
      event.preventDefault();
    }
    
    return false;
  } 
  
  else {return keyPressed;}
}

<HTML>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onKeyPress="return enterAsTab();">
  <input type='text' />
  <input type='text' />
  <input type='text' />
  <input type='text' />
  <input type='text' />
</body>

</HTML>

#1