2011-11-03 11 views
5

Prima di tutto so che contenteditable è solo iOS 5 che ho preso in considerazione per questo: stiamo offrendo agli utenti con iOS 5 una funzionalità che consente di incollare in Rich Text utilizzando contenteditable. Questa funzione funziona alla grande fino a quando tutto ciò che voglio fare è quando la vista sembra impostare il campo contenteditable come attivo (preselezionarlo) in modo che la tastiera appaia e l'utente possa iniziare a digitare direttamente. Ecco il file HTML locale che sto usando per l'UIWebViewCome preselezionare il campo contenteditable in UIWebView iOS5

<html> 
    <body> 
     <div id="content" contenteditable="true" style="font-family: Helvetica">PLACEHOLDER</div> 
    </body> 
</html> 

ho già provato con un po 'di javascript per realizzare questo utilizzando tutorial che ho trovato per la preselezione di un input di testo. Non riuscivo a farlo funzionare, anche quando provavo a passare a un campo di immissione del testo per il test. Ciò è probabilmente dovuto alla mia inesperienza con javascipt, quindi se questa è la soluzione, si prega di essere espliciti (dato che sono completamente estraneo a javascript).

Grazie per qualsiasi aiuto

risposta

4

Purtroppo non è possibile farlo in Mobile Safari. Credo che Apple abbia scelto di impedire che ciò accada perché quando visiti alcuni siti, come Google ad esempio, il campo di ricerca viene immediatamente messo a fuoco. Ciò sarebbe estremamente fastidioso per gli utenti se ogni sito fosse visitato, la tastiera spuntasse. Sul desktop questo comportamento non ha importanza, ma su dispositivi mobili è molto evidente.

correlati: Mobile Safari Autofocus text field

+0

Grazie, questo è quello che sospettavo - ma volevo essere sicuro. – xizor

0

ho informazioni su contenteditable su iOS, ma penso che si dovrebbe essere in grado di creare semplicemente una gamma e aggiungerlo alla selezione.

var input; // your contenteditable element 
var range = document.createRange(); 
range.selectNodeContents(input); 

var sel = window.getSelection(); 
sel.removeAllRanges(); 
sel.addRange(range); 
+1

funziona su browser desktop moderni. ma non su Safari mobile come da iOS 5. –

+0

buono a sapersi :) –

2

Si può evocare la tastiera se si è nel contesto di un gestore di eventi click.

Per esempio

document.body.addEventListener('click', function() { 
    content.focus(); 
}, false); 

dovrebbe funzionare

+0

Funziona! Il comportamento attuale è leggermente più permissivo di questo (ci sono altre occasioni/eventi che ti permettono di focalizzare un contentEditable), ma è così bizzarro e imprevedibile che non vale davvero la pena documentarlo. – aaaidan

7

Ora, se qualcuno vuole raggiungere questo obiettivo in iOS 6, che può aprire la tastiera iOS a livello di codice come questo,

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    // Do any additional setup after loading the view from its nib. 

    // keyboardDisplayRequiresUserAction available in iOS >= 6 
    if ([webView respondsToSelector:@selector(setKeyboardDisplayRequiresUserAction:)]) { 
     webView.keyboardDisplayRequiresUserAction = NO; 
    } 
} 

e poi,

- (void)webViewDidFinishLoad:(UIWebView *)webView { 
    // Assuming that you're using jquery. If not, use document.getElementById('YourInputElementID') 
    NSString *evalStr = [NSString stringWithFormat:@"setTimeout(function(){$('#YourInputElementID').focus();},1000);"]; 
    [webView stringByEvaluatingJavaScriptFromString:evalStr]; 
} 

Questo eseguirà questo javascript dopo 1 secondo. Per sicurezza, dovresti chiamare il codice di attivazione della messa a fuoco quando l'elemento di messa a fuoco è stato caricato.

+0

Funziona molto bene, ty. –

+0

L'impostazione 'keyboardDisplayRequiresUserAction' in InterfaceBuilder non ha funzionato per me, ma l'aggiunta nel codice l'ha risolto. Se il codice sopra non funziona per qualcuno che legge, assicurati che la proprietà sia effettivamente impostata in fase di esecuzione. – tharkay

Problemi correlati