Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text selection on double click in HTML with a float

Tags:

html

With the subsequent code :

<span>Label1 Label2</span>
<span style="float:left"><span>Value</span></span>

when double-clicking on the "Value" word, Label2 is selected (highlited) but not Label1. Why is this the case ?

What can I do to select only the "Value" word and none of the "Label" words ?

Live example: http://codepen.io/anon/pen/IHDzj

Edit: this bug only exists in Chrome

like image 216
Molochdaa Avatar asked Aug 08 '14 08:08

Molochdaa


3 Answers

This is possibly the Chrome issue. Because in Firefox it works fine. However to solve it in chrome just add space before closing of first span tag as shown here.

<span>Label1 Label2 </span>
<span style="float:left"><span>Value</span></span>

Because whenever we select a text by doubleclicking it.The word as well as white space got selected in chrome and this bug has already fired in chromium issue.

like image 109
Roshan Avatar answered Nov 07 '22 00:11

Roshan


Try using the property user-select: none for the labels so that it wont get selected on clicking.This property is vendor specific.

html

<span id = "label1">Label1 Label2</span>
<span style="float:left"><span>Value</span></span>

css

#label1 {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

DEMO

Reference:Stack Overflow Post

Read more on user-select

like image 28
Sunil Hari Avatar answered Nov 07 '22 01:11

Sunil Hari


I can confirm, that I had the same problem in Chrome, but not in Firefox. The solution I used was to add a space before Value like so:

<span>Label1 Label2</span>
<span style="float:left"><span> Value</span></span>

The solution by Roshan didn't work for me, because double clicking Value would also select the space after Label2.

like image 22
Alexander Popov Avatar answered Nov 07 '22 01:11

Alexander Popov