Skip to content Skip to sidebar Skip to footer

How To Disable Text Selection On Double Click, But Not Otherwise?

There are tons of questions like this one and every answer I've seen is: use user-select: none. That surprises me, because disabling selection completely is in most cases very bad

Solution 1:

not too sure i understand your meaning. are you trying something like this ?

Run the demo in the snippet below or in codepen DEMO

::-moz-selection {
  background: red;
}
::-webkit-selection {
  background: red;
}

::selection {
  background: red;
}
a:active::-moz-selection {
  background: transparent;
}
a:active::-webkit-selection {
  background: transparent;
}

a:active::selection , a:focus::selection{/* focus + tabindex for ie where no href*/background: transparent;
}
a {border:solid;}
<p>Pellentesque <a>habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</a>. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit <atabindex="0">Internet Explorer</a>amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

??

Solution 2:

I have a basic scripting solution. Check out this JSFiddle. Basically, what I've done is store and restore selectionStart and selectionEnd values based off of Javascript events. I simplified it a lot since the base version. It should work perfectly for disabling text selection on double-clicks.

There's no real way to do this in CSS that I've thought of so far.

Post a Comment for "How To Disable Text Selection On Double Click, But Not Otherwise?"