17

This one is IE specific (not anymore, apparently). We have very simple code:

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

On Chrome it works fine, you can select all text inside <input>, eg. double-click it or click-and-drag. On IE10 you cannot do both of these actions (not sure about IE in other versions). Any ideas?

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

2
  • 2
    This appears to be broken on Chrome now as well (you can double click but not click and drag), and even more broken on Firefox (you can't choose a text position with the mouse there) Dec 31, 2014 at 17:00
  • 1
    Same here in IE11, Chrome is working fine still... Dec 23, 2015 at 13:01

4 Answers 4

7

This was reported as a bug a few months back and is currently being considered for a future release.

One of the hold-ups is that we are unable to determine the impact of the issue. I recall searching online and on GitHub for sites that relied on this pattern, but largely came up empty-handed. If you happen to know of any sites that use this, and are therefore broken in Internet Explorer 10 and 11, I would be happy to update the internal issue and request immediate action.

That being said, it does appear you can select text if you tab focus to the element itself, and then utilize the arrow and shift keys to perform your selection. You can also right-click the input control, which also places a cursor that you can then manipulate with your keyboard. It's not ideal, but it may suffice until we can resolve this from the browser-end.

7
  • Thanks Jonathan for answer. We are facing this problem on client intranet website, we are using ng-grid with movable columns and filters in headers.
    – yarl
    Nov 27, 2014 at 8:33
  • @yarl Would you be willing to setup a fiddle using your configuration and either ng-grid (or its newer version, UI Grid) for further testing? Perhaps we can identify another way around the issue for the time being.
    – Sampson
    Nov 28, 2014 at 4:48
  • Currently facing this exact issue in our form builder at awesomeforms.com ... Aug 20, 2015 at 0:39
  • @Sampson: it's been a year, any update or work around solution from Microsoft?
    – Kien Chu
    Nov 1, 2015 at 9:52
  • @ChrisVincent Can you get me access to the builder to share with our team? For issues like this, it's often best to have a real site on-hand that is broken as a result of the bug.
    – Sampson
    Nov 2, 2015 at 17:57
3

One possible workaround to this solution is to remove the draggable attribute from the parent element in situations where you expect the text to be highlighted.

For instance in an application I'm working on, we show text in a span by default, then reveal an input when the user clicks on it to edit. At that point we remove the draggable attribute until the user is done editing, and then readd it.

That particular flow may or may not work for you, but if you can anticipate when the user might highlight, you can minimize the effect of the undesirable browser behavior. At minimum you can toggle draggable on focus and blur so that the user can highlight with the mouse if he's already editing the text.

1

The way Ben McCormick mentioned works good for me on the major browsers (tested with Internet Explorer 11, Firefox and Chrome). For my solution you need to have an criteria to determine the parent with the draggable attribute (in my case I use a class name for that).

function fixSelectable(oElement, bGotFocus)
{
	var oParent = oElement.parentNode;
	while(oParent !== null && !/\bdraggable\b/.test(oParent.className))
		oParent = oParent.parentNode;
	if(oParent !== null)
		oParent.draggable = !bGotFocus;
}
<div class="draggable" draggable="true">
    <p>Text</p>
    <input type="text" onfocus="fixSelectable(this, true)" onblur="fixSelectable(this, false)"/>
</div>

0

What we observed, if we blur out and focus again the issue is resolved. However moving cursor position is still not accomplished. But at least does the trick for single click.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.