Prevent Text Selection After Double Click

Prevent text selection after double click

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

You can also apply these styles to the span for all non-IE browsers and IE10:

span.no_selection {
    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

JavaScript: Disable text selection via doubleclick

I fear you can't prevent the selection itself being "native behavior" of the browser, but you can clear the selection right after it's made:

<script type="text/javascript">
document.ondblclick = function(evt) {
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();
}
</script>

Edit: to also prevent selecting whole paragraph by "triple click", here is the required code:

var _tripleClickTimer = 0;
var _mouseDown = false;

document.onmousedown = function() {
    _mouseDown = true;
};

document.onmouseup = function() {
    _mouseDown = false;
};

document.ondblclick = function DoubleClick(evt) {
    ClearSelection();
    window.clearTimeout(_tripleClickTimer);

    //handle triple click selecting whole paragraph
    document.onclick = function() {
        ClearSelection();
    };

    _tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000);
};

function RemoveDocumentClick() {
    if (!_mouseDown) {
        document.onclick = null; 
        return true;
    }

    _tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000);
    return false;
}

function ClearSelection() {
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();
}​

Live test case.

Should be cross browser, please report any browser where it's not working.

How to prevent the double-click select text in Javascript

You can disable text selection using css (Note that this will effectively disable all selection methods and not just double clicking)

ul li {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

http://jsfiddle.net/T3d7v/1/

Javascript, text area, prevent double click section

so you want to disable selection on double click, you can do this

_wDomTextArea.addEventListener('mousedown', (event) => {
  if (event.detail > 1) {
    event.preventDefault();
    console.log('double click');
  }
})

<textarea id="_wDomTextArea"></textarea>

How to prevent text select outside HTML5 canvas on double-click?

Firstly let me note that your canvas is not filling the width of the page, it is only 100 pixels wide. Width and height canvas attributes always parse to pixels, so writing width="100%" just means 100 pixels as far as the Canvas tag is concerned.

To answer your question, write in javasript:

//give your canvas an id, I used 'can'    
var canvas = document.getElementById('can');
canvas.onselectstart = function () { return false; }

The double-click text problem will no longer occur.

How prevent double click selection but not regular selection with css

From other question https://stackoverflow.com/a/43321596/1919821

document.addEventListener('mousedown', function (event) {
  if (event.detail > 1) {
    event.preventDefault();
    // of course, you still do not know what you prevent here...
    // You could also check event.ctrlKey/event.shiftKey/event.altKey
    // to not prevent something useful.
  }
}, false);

//one line verstion
document.onmousedown = e => ((e.detail > 1)? (e.preventDefault():'')

How to prevent selecting text on double click?

try little jquery

 $(element).mousedown(function(){ return false; })

with css try

-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;

---

Related Topics