problema con Chrome movimentazione forma: onfocus input = "this.select()"

Question

Sto utilizzando il seguente codice HTML per autoselect del testo in un campo modulo quando un utente fa clic sul campo:

<input onfocus="this.select()" type="text" value="Search"> 

Funziona bene con Firefox e Internet Explorer (lo scopo è usare il testo predefinito per descrivere il campo all'utente, ma evidenziarlo in modo che al clic possano iniziare a digitare), ma ho problemi a farlo funzionare Cromo. Quando faccio clic sul campo modulo in Chrome, il testo viene evidenziato per una frazione di secondo, quindi il cursore salta alla fine del testo predefinito e l'evidenziazione scompare.

Qualche idea su come farlo funzionare anche in Chrome?

Answer 1

Invece di collegarsi all'evento onfocus è necessario associare questa azione all'evento onclick e funzionerà come desiderato.

<input onclick="this.select()" id="txt1" name="txt1" type="text" value="Search"> 

Answer 2

Se proprio insisti a attaccare con onfocus, allora avrete bisogno di aggiungere onmouseup="return false" troppo.

Answer 3

Il modo in cui ho risolto questo problema era creando una funzione wrapper che utilizza setTimeout() per ritardare la chiamata effettiva a select(). Quindi chiamo quella funzione nell'evento focus della casella di testo. L'utilizzo di setTimeout rimuove l'esecuzione fino a quando lo stack delle chiamate è nuovamente vuoto, ovvero quando il browser ha completato l'elaborazione di tutti gli eventi verificatisi quando si fa clic (mouse, mouse, clic, focus, ecc.). È un po 'un trucco, ma funziona.

function selectTextboxContent(textbox) 
{ 
    setTimeout(function() { textbox.select(); }, 10); 
} 

allora si può fare qualcosa di simile per fare la selezione a fuoco:

<input onfocus="selectTextboxContent(this);" type="text" value="Search"> 

Answer 4

Sulla risposta di Jason, qui è una funzione che sostituisce la funzione "select" di nodi di input DOM con una versione aggiornata che ha il timeout costruito in:

if (/chrome/i.test(navigator.userAgent)) { 
    HTMLInputElement.prototype.brokenSelectFunction = 
     HTMLInputElement.prototype.select; 

    HTMLInputElement.prototype.select = function() { 
     setTimeout(function(closureThis) { return function() { 
      closureThis.brokenSelectFunction(); 
     }; }(this), 10); 
    }; 
} 

in sostanza, (in Chrome solo) abbiamo appena rinominato la funzione built-in, ma spezzato select() per brokenSelectFunction() e poi ha aggiunto un nuovo functio n a tutti gli ingressi chiamati select() che chiama brokenSelectFunction() dopo un ritardo. Ora chiamate semplicemente select() normalmente, poiché la funzione di selezione integrata è stata sostituita dalla funzione fissa con il suggerimento di delay di Jason.

In questo modo, non è necessario modificare le chiamate esistenti per utilizzare una funzione wrapper (e una volta risolto in Chrome, è sufficiente rimuovere lo shim precedente e tornare alla normalità).

textbox.select(); // now runs select with setTimeout built-in (in Chrome only) 

Edit: si potrebbe desiderare di cambiare la partita user-agent da "cromo" a "WebKit", in quanto questo problema si verifica in tutte le Webkit browser tra cui Safari, e questa correzione funziona per qualsiasi di loro.

Answer 5

Questo funziona meglio per me ...

<input type="text" onfocus="this.searchfocus = true;" onmouseup="if(this.searchfocus) {this.select(); this.searchfocus = false;}" /> 

L'evento mouseup dopo onfocus.

Answer 6

Basta usare <input onmouseup=select()>. Funziona su tutti i browser.

Answer 7

Questa è una soluzione che funziona in Firefox, Chrome e IE, entrambi con focus tastiera e mouse focus. Gestisce inoltre scatta correttamente dopo la messa a fuoco (si muove il cursore e non riselezionare il testo):

<input 
onmousedown="this.clicked = 1;" 
onfocus="if (!this.clicked) this.select(); else this.clicked = 2;" 
onclick="if (this.clicked == 2) this.select(); this.clicked = 0;" 
> 

Con il fuoco della tastiera, solo onfocus trigger che seleziona il testo perché this.clicked non è impostato. Con il focus del mouse, trigger onmousedown, quindi onfocus e quindi onclick che seleziona il testo in onclick ma non in onfocus (Chrome richiede questo).

I clic del mouse quando il campo è già a fuoco non si attivano onfocus che non determina la selezione.

Answer 8

onfocus="setTimeout(function(){select(this)})" 

o onfocus="setTimeout(function(){select(this)},118)" per Firefox.

Answer 9

Questa domanda è stata pubblicata cinque anni fa, ma con HTML5, è possibile rendere questa funzione con l'attributo segnaposto.

<input type="text" name="fname" placeholder="First name">