Nessuna possibilità di selezionare il testo all'interno di <input> quando il genitore è trascinabile

Question

Questo è IE specifico (non più, apparentemente). Abbiamo codice molto semplice:

<div draggable="true"> 
    <p>Text</p> 
    <input type="text"/> 
</div> 

Su Chrome funziona bene, è possibile selezionare tutto il testo all'interno <input>, ad es. fai doppio clic su di esso o fai clic e trascina. Su IE10 non è possibile eseguire entrambe le azioni (non sono sicuro di IE in altre versioni). Qualche idea?

Fiddle: http://jsfiddle.net/s5g4gr8g/

Answer 1

Questa era reported as a bug qualche mese fa ed è attualmente in fase di considerazione per una futura release.

Uno dei problemi è che non siamo in grado di determinare l'impatto del problema. Ricordo la ricerca online e su GitHub per siti che si basavano su questo modello, ma in gran parte si presentarono a mani vuote. Se ti capita di conoscere siti che lo utilizzano e sono quindi infranti in Internet Explorer 10 e 11, sarei lieto di aggiornare il problema interno e richiedere un'azione immediata.

Detto questo, sembra che sia possibile selezionare il testo se si attiva il tabulatore sull'elemento stesso, e quindi utilizzare i tasti freccia e maiuscole per eseguire la selezione. Puoi anche fare clic con il pulsante destro del mouse sul controllo di input, che posiziona anche un cursore che puoi quindi manipolare con la tastiera. Non è l'ideale, ma può bastare fino a quando non siamo in grado di risolvere questo dal browser-end.

Answer 2

Una possibile soluzione a questa soluzione è rimuovere l'attributo trascinabile dall'elemento padre in situazioni in cui si prevede che il testo venga evidenziato.

Ad esempio in un'applicazione su cui sto lavorando, mostriamo il testo in un intervallo di default, quindi riveliamo un input quando l'utente fa clic su di esso per modificarlo. A quel punto rimuoviamo l'attributo trascinabile fino a quando l'utente ha terminato la modifica, quindi lo ha letto.

Quel particolare flusso potrebbe o non potrebbe funzionare per voi, ma se potete anticipare quando l'utente potrebbe evidenziare, è possibile minimizzare l'effetto del comportamento indesiderato del browser. Al minimo è possibile attivare il trascinamento di messa a fuoco e sfocatura in modo che l'utente possa evidenziare con il mouse se sta già modificando il testo.

Answer 3

Quello che abbiamo osservato, se si configura e si concentra nuovamente, il problema è risolto. Tuttavia, la posizione del cursore in movimento non è ancora stata completata. Ma almeno il trucco per un singolo clic.

Answer 4

Il modo in cui Ben McCormick ha parlato funziona bene con me sui principali browser (testato con Internet Explorer 11, Firefox e Chrome). Per la mia soluzione è necessario avere un criterio per determinare il genitore con l'attributo trascinabile (nel mio caso io uso un nome di classe per quello).

function fixSelectable(oElement, bGotFocus) 
 
{ 
 
\t var oParent = oElement.parentNode; 
 
\t while(oParent !== null && !/\bdraggable\b/.test(oParent.className)) 
 
\t \t oParent = oParent.parentNode; 
 
\t if(oParent !== null) 
 
\t \t oParent.draggable = !bGotFocus; 
 
}

<div class="draggable" draggable="true"> 
 
    <p>Text</p> 
 
    <input type="text" onfocus="fixSelectable(this, true)" onblur="fixSelectable(this, false)"/> 
 
</div>