Restrict text selections on webpages to HTML element level

Question

Is it possible to restrict text selection to single tags? When using absolute position, texts seem to be marked across multiple elements, e.g. in the following example:

<span style="position: absolute; left: 171px;"><span>TextBlock</span></span>
<div style="position: absolute; left: 0px;">
    <input type="radio"></input><label>RadioButton</label>
</div>
<div style="position: absolute; left: 607px;  top: 100px">
    <input type="radio"></input><label>RadioButton</label>
</div>

If you double-click the text of one of the controls, those text of previously added items are selected as well. Is there any way to restrict this? And this excludes disabling selection completely since it is a must-have feature.

I also tried user-select (specifically the webkit-version for Chrome) but unfortunately to no avail.

An `input` text tag's contents will not extend outside of it. You could style it to look like something else. — Chuck Le Butt, Jan 28 '16 at 14:18
Ok, now I see what you intended to do. That would be one way to achieve the results, yes, but the controls are already established and generated automatically. Unfortunately I cannot replace them all by input fields. Thanks for the response though. — A47, Jan 28 '16 at 14:19
Let me just clarify: You want the user to be able to select text, but only one element at a time?(As opposed to them not being able to select any text at all.) — Chuck Le Butt, Jan 28 '16 at 14:20
You can add `contenteditable="true"` parameter in your div to allow selection only inside it. But user will be allow to modify the content :( — Yoplaboom, Jan 28 '16 at 14:22
@Chuck Just changed my comment - I hear you, but I that solution won't work for our current project. — A47, Jan 28 '16 at 14:23
Might help : http://stackoverflow.com/questions/1173194/select-all-div-text-with-single-mouse-click — Ankit, Jan 28 '16 at 14:25
I don't think it's possible to restrict to only one element. Your only other option (that I can think of) is placing `user-select: none;` on the elements you don't want the user to be able to select. — Chuck Le Butt, Jan 28 '16 at 14:25
@Yoplaboom That's also a nice approach but it would allow users to adjust texts on the page which strikes me as a little weird :/ — A47, Jan 28 '16 at 14:26
@ChuckLeButt That's what I want to avoid - there might be multiple elements containing texts that we want to be selectable, so if they follow each other in our document, we'd be back to square one. — A47, Jan 28 '16 at 14:29
@user2630996 a solution is to prevent content modification is to prevent `keypress`on your `contenteditable`
. I know its dirty... but... it can works... — Yoplaboom, Jan 28 '16 at 14:34

score 1 · Accepted Answer · answered Jan 28 '16 at 15:10

You can use javascript to solve this.

function selectElement(element) {
    var selection,
        range;

    if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
        element.focus();
        element.setSelectionRange(0, element.value.length);
    } else {
        if (element.hasAttribute('contenteditable')) {
            element.focus();
        }

        selection = window.getSelection();
        range = document.createRange();

        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

function getSelectElementCallback(element) {
    return function () {
        selectElement(element);
    };
}

var elements = document.getElementsByClassName('select-only-this');

for (var i = 0, l = elements.length; i < l; i++) {
    elements[i].addEventListener('dblclick', getSelectElementCallback(elements[i]));
}

Here is a rapid fiddle that do what you want.

Similar to Lionel's approach below (see comments). Great way to solve it under "normal" circumstances but due to memory issues this might be problematic in our case. Thanks though :) — A47, Jan 28 '16 at 15:22

score 0 · Answer 2 · answered Jan 28 '16 at 14:32

0

Using user-select you should disable selection only for some elements, allowing the normal selection on the rest of the document. In this pen with similar content of your example, I used the class no-selection to apply in those element.

user-select have a great browsers support

answered Jan 28 '16 at 14:32

Lionel T

1,559
1
13
30

I was pondering this as well but as I already replied to Chuck - I want to avoid this because there might be multiple elements containing texts that we want to be selectable, so if they follow each other in our document, we'd be back to square one. – A47 Jan 28 '16 at 14:36
Ok, understand. You could implement a _quick selection_ on selectable text squares like I did in the [updated pen](http://codepen.io/elrumordelaluz/pen/95d57bd1634ae78d95d5660a61b74af3). Just clicking it selects all the container. – Lionel T Jan 28 '16 at 14:44

Restrict text selections on webpages to HTML element level

2 Answers2