Come supportare più selezioni di testo su browser incrociato?

Question

Sto creando uno strumento di annotazione basato sul Web, in cui gli utenti finali possono selezionare e annotare una sezione di testo da un documento HTML. A livello di programmazione, l'accesso e il lavoro con il testo selezionato e l'intervallo corrispondente sono intuitivi usando "window.getSelection" e "getRangeAt".

Sto incontrando un problema, tuttavia, quando provo a mettere tutto questo insieme in un'applicazione cross-browser. Tutto funziona in Firefox, ma in Safari ho notato immediatamente che quando faccio clic su un pulsante HTML (ad esempio il pulsante "annotazione"), la selezione del testo utente corrente scompare, come se facendo clic sul pulsante riposizionasse il cursore di testo. Il mio codice che tenta di accedere a window.getSelection viene eseguito da uno script in questo pulsante, che segnala quindi che non esiste alcuna selezione.

Ho scavato e ho dato un'occhiata a come Google Docs, in particolare la loro applicazione di elaborazione testi gestisce questo, come essenzialmente il comportamento e la meccanica di selezione del testo e facendo clic su "Grassetto" o "Cambia carattere" corrisponde alla mia funzione di annotazione. In Google Documenti, caricano il testo del documento da modificare in un iframe. Giocando con questo, ho imparato che Firefox immediatamente supporta diversi intervalli di selezione in una pagina web che contiene più frame o iframe. In altre parole, posso selezionare una sezione di testo nella pagina di base e una sezione separata del testo nell'iframe senza che la prima selezione scompaia. Questa soluzione di Google Documenti funziona sia per Firefox che per Safari (i due browser a cui sono interessato). Ma quando ho creato una semplice pagina di esempio per testare questa soluzione, non funzionerebbe in Safari. Non appena faccio clic su un pulsante o effettuo la selezione del testo nella pagina principale (al di fuori dell'iframe), il testo selezionato dell'iframe corrente scompare.

Qualcuno sa cosa mi manca qui per farlo funzionare? O hai un suggerimento su un altro modo per farlo funzionare?

Answer 1

ho imparato che Firefox out-of-the-box supporta più intervalli di selezione in una pagina web che contiene più frame

Inferno, Firefox supporta anche selezioni multiple su un singolo fotogramma! (Prova clic-trascina quindi ctrl-clic-trascina su una parte di testo separata.)

in Safari Ho notato immediatamente che quando faccio clic su un pulsante HTML la selezione del testo utente corrente scompare, come se si scattasse su il pulsante riposizionato il cursore di testo

Funziona per me, in Safari 3.2.1 su Windows. Facendo clic su un pulsante <>, < tipo di input = "button"> o < a> lascia la selezione dov'è, anche se in grigio se si trova in un frame diverso. 'Window.getSelection()' continua a funzionare come al solito.

Puoi pubblicare un test case e quale versione di Safari lo rende scorretto?

Answer 2

Aggancia il gestore di eventi all'evento del mouse su pulsante (invece dell'evento click o mouseup). Questo ti permetterà di prendere la selezione corrente prima che sia cancellata.

È possibile mantenere l'esperienza utente memorizzando la selezione in una variabile e utilizzandola solo se il pulsante riceve un evento click. Come questo:

<button onmousedown="sel = window.getSelection()" onclick="alert(sel)">What's the selection?</button> 

Answer 3

Fuori della parte superiore della mia testa, penso che la soluzione più semplice sarebbe quella di collegare un gestore di eventi per la selezione del testo e salvare la selezione corrente in un buffer, in questo modo non ci si deve preoccupare sui tempi.

Aprite il Firebug in questa pagina ed eseguire il seguente frammento di codice:

var buffer = ''; 
$('p').mouseup(function() { 
    buffer = window.getSelection(); 
}); 

È possibile selezionare quello che vuoi e vedere l'ultimo testo selezionato eseguendo:

console.log(buffer); 

Voila, cliccare/deselezionare il problema dei tempi risolto :)