dialog jqueryui non in grado di `select()` input in firefox 11

Question

Sto eseguendo questo codice in Firefox 11 su Windows 7. (Vedi http://jsfiddle.net/QStkd/).

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

Il valore in ingresso non è selezionato, che è non fare in Chrome e IE, anche non funziona se chiamo manualmente il metodo select().

Si tratta di un problema noto? C'è un modo per selezionarlo? Timers work ma se faccio clic su run su jsfiddle dopo averlo caricato, non funziona più.

Answer 1

Sembra chiamare il focus() (che jquery-ui esegue per impostazione predefinita sul primo elemento tabbable) su Chrome (non è possibile testare IE - su OS X) mette a fuoco la casella e seleziona il testo all'interno della casella.

Tratto da 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, d'altra parte, sembra porre solo il cursore all'interno della casella quando si chiama messa a fuoco. Pertanto, è necessario chiamare implicitamente il comando select dopo aver creato la finestra di dialogo per ottenere ciò che si sta cercando di fare.

Se ricarichi i timer a tempo violento (anziché fare clic su Esegui), noterai che l'esempio funziona sempre. Penso che jsFiddle sia effettivamente il colpevole qui (probabilmente l'evento di hashchange, o qualche evento di messa a fuoco su uno dei pannelli dopo aver premuto 'run' - non ho scavato così profondamente).

EDIT: (mi dispiace, è tardi) Sembra che la causa principale del "problema" è Firefox. Non sono sicuro se questo è stato progettato o meno, ma da quello che posso vedere, sembra che Firefox non consenta di selezionare il testo in due diversi elementi di input all'interno di diversi riquadri di contenuti contemporaneamente nella stessa pagina. Questo non sembra influenzare Chrome (e, supposto, IE9).

Ho fatto un rapido esempio locale che ha due iframe uno di fianco all'altro (chiamiamoli a destra ea sinistra). Sinistra contiene un'area di testo e destra contiene la finestra di dialogo jquery-ui, simile al violino che hai postato. ha diritto il seguente codice:

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

sinistra ha il seguente codice:

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

Se pezzo questi insieme e controllare il risultato in Firefox, si noterà che l'ingresso è focalizzato e selezionato fino a quando la textarea a sinistra è focalizzata. Sospetto che qualcosa di simile a questo stia succedendo in jsFiddle.

Answer 2

Prova a utilizzare l'evento open della finestra di dialogo ui. Questo evento viene attivato quando si apre la finestra di dialogo.

$('<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

questo è un problema di FF nel Regno determinare se è stato impostato il DOCTYPE. Non c'è un ottimo modo per risolverlo, un timer per mettere a fuoco tende ad essere il "trucco" intorno.Tuttavia c'è un altro passaggio, se il tuo Doctype è impostato su w3 standard xhtml puoi usare this per ottenerlo selezionato sullo stato attivo. Aggiungi onfocus="this.select();" come una proprietà del tuo input, in modo che quando è focalizzato, viene immediatamente selezionato.