Come si seleziona programmaticamente il testo di un campo di input su dispositivi iOS, ad esempio iPhone, iPad con Safari mobile?
Normalmente è sufficiente chiamare la .select()funzione <input ... />sull'elemento, ma questo non funziona su quei dispositivi. Il cursore viene semplicemente lasciato alla fine della voce esistente senza che sia stata effettuata alcuna selezione.
Risposte:
input.setSelectionRange(0, 9999);
.focus()l'input prima di invocare input.setSelectionRange. Se stai ascoltando l' focusevento sull'ingresso, ricorda di tenere conto di un ciclo infinito.
readonlyattributo impostato.
setSelectionRange()in un focusgestore funziona quando si attiva .focus()a livello di codice, ma quando si tocca manualmente l'input di testo su iOS, la selezione non viene eseguita. Basti dire che tutto ciò che devi fare è chiamare setSelectionRange()all'interno di un setTimeout di 0 e funziona come previsto, indipendentemente da ciò che attiva il focus.
Niente in questo thread ha funzionato per me, ecco cosa funziona sul mio iPad:
// t is the input field
setTimeout(function() {
t.setSelectionRange(0, 9999);
}, 1);
È difficile dimostrare un aspetto negativo, ma la mia ricerca suggerisce che si tratta di un bug in Mobile Safari.
Nota che focus () funziona, più o meno, anche se può richiedere più di un tocco per avere successo, e non è necessario se stai cercando di rispondere a un tocco di utente sul campo in questione poiché il tocco stesso darà al campo messa a fuoco. Sfortunatamente, select () è semplicemente non funzionante in Mobile Safari.
La soluzione migliore potrebbe essere una segnalazione di bug con Apple .
Guarda questo violino : (inserisci del testo nella casella di immissione e fai clic su "seleziona testo")
Seleziona il testo in una casella di input sul mio iPod (iOS6.0.1 di quinta generazione), apre la tastiera e mostra anche il menu Taglia / Copia / Suggerisci ...
Utilizzando semplice javascript. Non l'ho provato con jQuery
document.getElementById("p1").selectionStart = 0
document.getElementById("p1").selectionEnd = 999
Nota che il numero 999 è solo un campione. È necessario impostare questi numeri sul numero di caratteri che si desidera selezionare.
AGGIORNARE:
Per gli ultimi due, potresti sperimentare attivando un evento clic inputsull'elemento
AGGIORNAMENTO: (07-10-2013)
AGGIORNAMENTO: (14-11-2013)
.selectionStarte .selectionEnd fa il lavoro.AGGIORNAMENTO: (15-01-2015)
<input/>, l'iPad pensava che stessi toccando nel riquadro "CSS" di jsfiddle (in cui tutto ciò che ho digitato era invisibile). Una volta che il mio tocco è stato diretto verso il corretto <input/>, il pulsante "seleziona testo" funziona perfettamente su iOS-7.0.3 :-).
Spiacenti, nel mio post precedente, non ho notato il Javascript che implica che volevi una risposta in Javascript.
Per ottenere ciò che desideri in UIWebView con javascript , sono riuscito a racimolare due importanti informazioni per farlo funzionare. Non sono sicuro del browser mobile.
element.setSelectionRange(0,9999); fa quello che vogliamo
L'evento mouseUp sta annullando la selezione
Quindi (usando Prototype):
input.observe ('focus', function () {
this.setSelectionRange (0, 9999);
});
input.observe ('mouseup', function (event) {
event.stop ();
});
fa il trucco.
opaco
$("input").focus(function () { this.setSelectionRange(0, 9999); return false; } ).mouseup( function () { return false; });
focusininvece della messa a fuoco perché funzionasse, iOS 7
Sembra che lo stato attivo funzionerà, ma solo se chiamato direttamente da un evento nativo. chiamare il focus usando qualcosa come SetTimeout non appare richiama la tastiera. Il controllo della tastiera ios è molto scarso. Non è una buona situazione.
Qualcosa come il seguente funziona per me su Webkit fornito con Android 2.2:
function trySelect(el) {
setTimeout(function() {
try {
el.select();
} catch (e) {
}
}, 0);
}
Vedere Chromium Issue 32865 .
Con iOS 7 su iPad l'unico modo in cui sono stato in grado di fare questo lavoro è stato quello di utilizzare effettivamente al <textarea></textarea>posto del <input>campo.
per esempio
<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>
Come impedire all'utente di modificare il testo all'interno dell'area era più difficile, poiché se rendi textarea di sola lettura il trucco di selezione non funzionerà più.
Sono impazzito alla ricerca di questa soluzione, mentre tutte le tue risposte hanno aiutato ad aprire un altro barattolo di vermi per me.
Il cliente voleva che l'utente fosse in grado di fare clic e selezionare tutto , e anche lasciare che l'utente 'tab' e selezionare tutto sull'iPad (con una tastiera esterna. Lo so, pazzo ...)
La mia soluzione a questo problema era riorganizzare gli eventi. Prima Focus , poi clic , quindi touchstart .
$('#myFUBARid').on('focus click touchstart', function(e){
$(this).get(0).setSelectionRange(0,9999);
//$(this).css("color", "blue");
e.preventDefault();
});
Spero che questo aiuti qualcuno, poiché mi avete aiutato innumerevoli volte.