Javascript - Prevent whole text selection on triple click and make selected only single word

Question

When we double click on single word then browser select that word, when we triple click on single word then browser select that whole single line or whole paragraph.

Here, I want to prevent selecting all words on triple click and change to select only single word

I tried with this code

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}

I'm not sure I understand. Can you post your full JavaScript code, or create a JSFiddle page for it? — uncoder, Feb 07 '17 at 18:18
I couldn't cause ```evt.detail``` to get value of 3. No matter how I click, it always fires with value 0, maybe because you only subscribing to ```'click'``` event. Your best bet could be looking into ```jQuery.dblclick()``` event, or, alternatively, prevent text selection in general via CSS instead: http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css — uncoder, Feb 07 '17 at 19:02

score 1 · Answer 1 · edited Mar 04 '19 at 15:22

This works for you?jsfiddle

I edit your fiddle.

document.querySelector('div').addEventListener('click', function (evt) {
    var o = this,
        ot = this.textContent;
    if (evt.detail >= 3) {
        clearSelection();
    }
});

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}

score 0 · Answer 2 · answered Feb 07 '17 at 19:13

Here's my fork: http://jsfiddle.net/kr2t0bpw/1/

It captures the selected word on the second click and saves the offsets. On third click it clears the selection and creates a new one with the previous saved offset.

var throttle = false;
var sel = window.getSelection();
var selStart = 0;
var selEnd = 0;

document.querySelector('div').addEventListener('click', function (evt) {    
    if (!throttle && evt.detail === 2) {
      selStart = sel.anchorOffset;
      selEnd = sel.focusOffset;
    }

    if (!throttle && evt.detail === 3) {
    var node = this.firstChild;
    sel.removeAllRanges();
    throttle = true;

    var range = document.createRange();
    range.setStart(node, selStart);
    range.setEnd(node, selEnd)

    sel.removeAllRanges();
    sel.addRange(range);
  }
});

score 0 · Answer 3 · answered Jan 18 '23 at 01:38

this is old and i cant add a comment, but for the answer of @kbariotis, you need to set throttle to false at the end or it will just work once.

var throttle = false;
var sel = window.getSelection();
var selStart = 0;
var selEnd = 0;

document.querySelector('div').addEventListener('click', function (evt) {    
    if (!throttle && evt.detail === 2) {
      selStart = sel.anchorOffset;
      selEnd = sel.focusOffset;
    }

    if (!throttle && evt.detail === 3) {
    var node = this.firstChild;
    sel.removeAllRanges();
    throttle = true;

    var range = document.createRange();
    range.setStart(node, selStart);
    range.setEnd(node, selEnd)

    sel.removeAllRanges();
    sel.addRange(range);
  }
throttle = false;
});

Javascript - Prevent whole text selection on triple click and make selected only single word

3 Answers3