jqueryui diálogo no puede `seleccionar()` entrada en firefox 11

Question

Estoy ejecutando este código en Firefox 11 en Windows 7. (Ver http://jsfiddle.net/QStkd/).

$('<div><input type="text" value="val" /></div>').dialog(); 

El valor de la entrada no está seleccionada, que es no hacerlo en Chrome e IE, sino que también no funciona si llamo manualmente el método select().

¿Es esto un problema conocido? ¿Hay alguna forma de seleccionarlo? Timers work pero si hago clic en run en jsfiddle después de que se carga, ya no funciona.

Answer 1

Parece que llamar a focus() (que jquery-ui hace por defecto al primer elemento tabble) en Chrome (no puede probar IE - en OS X) enfoca el cuadro y selecciona el texto dentro del cuadro.

Tomado de jquery.dialog.ui.js:

// set focus to the first tabbable element in the content area or the first button 
// if there are no tabbable elements, set focus on the dialog itself 
$(self.element.find(':tabbable').get().concat(
    uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
     uiDialog.get()))).eq(0).focus(); 

Firefox, por el contrario, parece que sólo colocar el cursor dentro de la caja cuando se llama foco. Por lo tanto, debe invocar implícitamente seleccionar llamada después de que se haya creado el cuadro de diálogo para lograr lo que desea hacer.

Si vuelve a cargar el violín de los temporizadores (en lugar de hacer clic en ejecutar), verá que el ejemplo funciona siempre. Creo que jsFiddle es en realidad el culpable aquí (posiblemente el evento hashchange, o algún evento de enfoque en uno de los paneles después de presionar 'ejecutar' - no he cavado eso profundamente).

EDIT: (lo siento, es tarde) Parece que la causa raíz del "problema" es Firefox. No estoy seguro si esto es comportamiento diseñado o no, pero por lo que puedo ver, parece que Firefox no permitirá que el texto se seleccione en dos elementos de entrada diferentes dentro de diferentes paneles de contenido al mismo tiempo en la misma página. Esto no parece afectar a Chrome (y, suponiendo, IE9).

Hice un ejemplo rápido localmente que tiene dos iframes uno al lado del otro (llamémoslos a la izquierda y a la derecha). La izquierda contiene un área de texto, y la derecha contiene el cuadro de diálogo de jquery-ui, similar al violín que publicaste. la derecha tiene el siguiente código:

<script type="text/javascript"> 
$('<div><input type="text" value="val" /></div>').dialog(); 
$('input').select(); 
</script> 

izquierda tiene el siguiente código:

<script type="text/javascript"> 
setTimeout(function() { 
    $('textarea').focus(); 
}, 1000); 
</script> 

Si PIEZA estos juntos y ver el resultado en Firefox, se dará cuenta de que la entrada se centra y se seleccionó hasta que el área de texto de la izquierda esté enfocado. Sospecho que algo similar a esto está sucediendo en jsFiddle.

Answer 2

Intente utilizar el evento open de ui diálogo. Este evento se desencadena cuando se abre el cuadro de diálogo.

$('<div><input id="yourInput" type="text" value="val" /></div>').dialog({ 
    open:function(){ 
    $("#yourInput").focus().select(); 
    } 
     } 
) 

http://jsfiddle.net/sergeir82/A6Wah/8/

http://jsbin.com/etivej/4/

Answer 3

Este es un problema de FF en el Reino determinar si ha configurado el DOCTYPE. No hay una buena manera de solucionarlo, un temporizador para enfocar tiende a ser el "hackear".Sin embargo, hay otro paso, si su Doctype está configurado con los estándares w3 xhtml, puede usar this para seleccionarlo en el enfoque. Agregue onfocus="this.select();" como una propiedad de su entrada, de modo que cuando esté enfocado, se seleccione inmediatamente.