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
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.
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
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With