CODEWITHSUNDEEP
htmldomdouble-click
Aren
Aren

Reputation: 55956

HTML Double Click Selection Oddity

I didn't post this on DocType because it's not really a design thing, the visual representation isn't my problem, the behaviour is. I'm sorry if this is misplaced but I don't feel it's a designer issue.

The following DOM:

<ul style="overflow: hidden;">
   <li style="float: left;"><strong>SKU:</strong>123123</li>
   <li style="float: left;"><strong>ILC:</strong>asdasdasdasd</li>
</ul>

Or

<div style="overflow: hidden;">
   <div style="float: left; width: 49%"><strong>SKU:</strong>123123</div>
   <div style="margin-left: 50%; width: auto;"><strong>ILC:</strong>asdasdasdasd</div>
</div>

Or

<p>
   <span><strong>SKU:</strong>123123</span>
   <span><strong>ILC:</strong>asdasdasdasd</span>
</p>

All present me an odd problem in

But not in

When you double click '123123' after 'SKU:', it selects '123123' AND 'ILC:' from the next dom element.

Take any text on this page (here in SO), double click a word, it only selects THAT WORD, even in the middle of a paragraph. These examples have dom elements closing them, anyone know why this is happening.

My fellow employees use the 'double click' mechanism to select the relevant product ID's to do their job, and this dosen't make sense to me what soever.

Upvotes: 14

Views: 4717

Answers (3)

CrazyTim
CrazyTim

Reputation: 7314

If you put a non-breaking space (&nbsp; or \u00A0) or just a empty space (" ") between each span, it will separate the words and prevent the double-click selection from spilling into adjacent spans.

If you don't want to see a visible space, use a zero-width space (&ZeroWidthSpace; or \u200B).​​​

Upvotes: 4

FoosFodder
FoosFodder

Reputation: 376

I had the same problem. If you put a space before the closing tag of your li that should fix it.

<ul style="overflow: hidden;">
    <li style="float: left;"><strong>SKU:</strong>123123 </li>
    <li style="float: left;"><strong>ILC:</strong>asdasdasdasd </li>
</ul>

Upvotes: 16

Robert Harvey
Robert Harvey

Reputation: 180808

I suspect that if you include a space or a non-breaking space &nbsp between your two elements, you will find that you can double-click, and select only one but not both elements, as the browser will no longer see the two elements as a single word.

Upvotes: 2

Related Questions