Keine Möglichkeit, Text innerhalb auszuwählen, wenn Elternteil ziehbar ist

Question

Dieses ist IE spezifisches (anscheinend nicht mehr). Wir haben sehr einfachen Code:

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

auf Chrom es gut funktioniert, können Sie den gesamten Text innerhalb <input> auswählen, zB. doppelklicken Sie darauf oder klicken und ziehen Sie. Auf IE10 können Sie diese beiden Aktionen nicht ausführen (nicht sicher über IE in anderen Versionen). Irgendwelche Ideen?

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

Answer 1

Das war reported as a bug ein paar Monate zurück und wird derzeit für eine zukünftige Version wird.

Einer der Nachteile ist, dass wir die Auswirkungen des Problems nicht feststellen können. Ich erinnere mich, online und auf GitHub nach Seiten zu suchen, die sich auf dieses Muster stützten, aber größtenteils mit leeren Händen kamen. Wenn Sie von Websites wissen, die diese verwenden und daher in Internet Explorer 10 und 11 beschädigt sind, würde ich gerne das interne Problem aktualisieren und sofortige Maßnahmen fordern.

Es scheint, dass Sie Text auswählen können, wenn Sie den Fokus auf das Element selbst legen, und verwenden Sie dann die Pfeiltasten und Umschalttasten, um Ihre Auswahl durchzuführen. Sie können auch mit der rechten Maustaste auf das Eingabesteuerelement klicken, das auch einen Cursor platziert, den Sie dann mit Ihrer Tastatur bearbeiten können. Es ist nicht ideal, aber es kann ausreichen, bis wir dies vom Browser-Ende lösen können.

Answer 2

Eine mögliche Problemumgehung für diese Lösung besteht darin, das ziehbare Attribut aus dem übergeordneten Element in Situationen zu entfernen, in denen Sie erwarten, dass der Text hervorgehoben wird.

Zum Beispiel in einer Anwendung, die ich arbeite, zeigen wir Text in einem Bereich standardmäßig, dann zeigen Sie eine Eingabe, wenn der Benutzer auf es zum Bearbeiten klickt. An diesem Punkt entfernen wir das ziehbare Attribut, bis der Benutzer die Bearbeitung beendet hat, und lasen es dann erneut.

Dieser bestimmte Ablauf kann oder kann nicht für Sie arbeiten, aber wenn Sie voraussehen können, wenn der Benutzer hervorheben könnte, können Sie den Effekt des unerwünschten Browserverhaltens minimieren. Zumindest können Sie bei Fokus und Unschärfe ziehbar schalten, so dass der Benutzer mit der Maus markieren kann, ob er bereits den Text bearbeitet.

Answer 3

Was wir beobachtet haben, wenn wir das Problem verschwimmen und wieder konzentrieren, ist das Problem gelöst. Die Cursorposition wird jedoch immer noch nicht erreicht. Aber macht zumindest den Trick für einen einzigen Klick.

$(document).on('mouseup', '#id input:text, textarea', function (event) { 
    $(this).blur();  
    $(this).focus(); 
}); 

Answer 4

Die Art und Weise Ben McCormick erwähnt gute Werke für mich auf den wichtigsten Browsern (getestet mit Internet Explorer 11, Firefox und Chrome). Für meine Lösung müssen Sie ein Kriterium haben, um den Elternteil mit dem ziehbaren Attribut zu bestimmen (in meinem Fall verwende ich einen Klassennamen dafür).

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>