¿Cómo convierto Enter to Tab (con cambio de foco) en IE9? Se trabajó en IE8

Question

tengo una entrada de texto con un controlador de eventos onkeydown que convierte <Introduzca> a <Tab> cambiando keyCode del evento del 13 al 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"; } 

En IE8, esto provocó que el evento onchange se disparara, pero eso no sucede en IE9. En cambio, el campo de entrada conserva el foco. ¿Cómo puedo hacer que eso suceda? (Funciona en Firefox 3.6 y Chrome 10.0.) Esto funciona incluso en el modo de navegador IE9 si configuro el modo de documento en "estándares IE8". Pero no funcionará con un Modo de documento de "Estándares IE9". (Mi DocType es XHTML 1.0 Transitional.)

Dado que funciona en IE7 & 8, ¿podría ser un error en IE9 que se solucione?

por favor: no puedo uso input.blur() o establecer manualmente un nuevo enfoque, el cual es asesorado por todas las otras soluciones que he leído. Ya he probado onkeypress y onkeyup sin suerte. Necesito una solución genérica que haga que la aplicación web se comporte literalmente como si golpeara <Tab>. Además, no tengo jQuery, sin embargo, Dojo 1.5 está disponible para mí.

También tenga en cuenta: SÉ que este comportamiento es "incorrecto" y que Enter debe enviar el formulario. Sin embargo, el personal de mi cliente proviene originalmente de un entorno de pantalla verde donde Enter los mueve entre campos. Debemos conservar la misma IU. Es lo que es.

ACTUALIZACIÓN: Encontré una diferencia entre IE8 & IE9. En IE8, mi configuración de myEvent.keyCode se mantiene. En IE9, NO. Puedo actualizar window.event.keyCode, y se mantendrá, pero eso no afectará a lo que ocurra más tarde. Argh ... ¿Alguna idea?

Answer 1

Parece que los eventos de IE9 son inmutables. Una vez que han sido despedidos, no puede cambiar las propiedades en ellos, solo previene Default() o los cancela. Entonces, la mejor opción es cancelar cualquier evento "enter" y volver a enviar un nuevo evento DOM desde la entrada de texto.

Ejemplo

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

Aquí está la documentación de MSDN en torno a eventos IE9 DOM:

de objeto de evento - 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

inicializar un evento de teclado - http://msdn.microsoft.com/en-us/library/ff975297(v=vs.85).aspx

Answer 2

La versión anterior de IE permitía la propiedad no estándar de escritura event.keyCode, IE9 ahora cumple con los estándares.

Es posible que desee considerar la funcionalidad que desea: desea hacer que la tecla enter se comporte como la tecla de tabulación, es decir, mueva el foco al siguiente campo de entrada (de texto). Hay más formas de hacer eso. Uno de ellos usa el atributo tabindex de los campos de entrada de texto.Si ordena los campos en su formulario utilizando este atributo tabindex, las funciones que presento aquí pueden arrojar el mismo resultado que su método keyCode anterior. Aquí hay dos funciones que probé en this jsfiddle. Un campo de entrada (texto) ahora se ve como:

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

las funciones a utilizar para la tabulación:

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

Si no desea utilizar campos tabindex y todas sus aportaciones son 'tabbable', see this jsfiddle

[EDIT ] funciones editados (ver jsfiddles) para hacer uso de la delegación de eventos y hacer que todo funcione en Opera también. Y this version imita shift-TAB también.

Answer 3

Aquí hay una idea diferente; cambie el estado de envío para que llame a una función en lugar de procesar el formulario. en la función, compruebe todos los campos para ver si están en blanco, luego enfóquese en el siguiente campo que no tiene un valor.
Entonces escriben un valor en el campo 1, presionan enter, y la función se ejecuta. ve que el campo 1 está lleno, pero el campo 2 no, así que concéntrese en el campo 2.
Luego, cuando todos los campos estén completos, envíe el formulario para su procesamiento.
Si el formulario tiene campos que pueden estar en blanco, podría usar una matriz booleana que mantendría un registro de los campos que recibieron el foco utilizando el evento onfocus().

Simplemente una idea fuera de la caja.

Answer 4

Un elemento <button> en una página provocará este problema.

En IE9 un elemento <button> toma el foco cuando se pulsa Intro. Cualquier botón de enviar o reiniciar causará el problema también. Si no utiliza enviar/restablecer, puede solucionarlo cambiando todos los botones a <input type="button"> o configurando el button's type attribute en el botón. es decir,

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

alternativa de acuerdo con la respuesta de KooiInc, puede editar su Javascript para utilizar event.preventDefault(); para evitar la actuación Ingrese clave de esta manera, y explícitamente llamar enfoque() en el siguiente elemento en el orden de tabulación.

Aquí hay un código de prueba escribí que demuestra el problema con el elemento de botón (nota el anillo de enfoque azul en button3 en IE9):

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

Answer 5

El código anterior provoca problemas. Aquí hay un código que te ayudará. Funciona en IE9, etc. 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; 
    } 
} 

Y luego simplemente deberá crear sus textos de entrada o cualquier código de

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

Answer 6

Mike Fdz es excelente.Con el fin de pasar por alto los campos ocultos, es posible que desee cambiar la línea

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

a esto:

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

Answer 7

Uso onpaste junto con onkeypress como

considerará que ya ha wrriten una función de JavaScript, que verifica la longitud del texto así que tendremos que validarlo al presionar la tecla como se muestra a continuación

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

onkeypress funcionará tanto en FF y IE

pero si se intenta hacer ctr + V en el cuadro de texto a continuación, onpaste manejará en IE en onkeypress FF se encarga de ello

Answer 8

Esto es lo que he hecho con lo que encontrado en 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];; 
} 

Answer 9

para evitar que un "enviar evento" provocada por Enter-teclado en su formulario de IE9, se retiran cualquier botón dentro del área formulario. Colóquelo (botón) fuera del área de la forma.

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>