0

I'm currently working on an issue for my company's webpage, in which one of the customer wanted a certain page, to be text highlight-able. The current setting for that certain page is that, the element block which displays the data cannot be highlighted and copied.

The code for the block looks something like below

<div id="mainpanel">
    <div id="datapanel">
        <!-- All the data are displayed in here -->
    </div>
</div>

Upon my investigation, i found out that datapanel block has disabled highlighting. But the question that i still couldn't find out was, how did they do it.

To my understanding, there are several ways of disabling highlighting text on webpage, and i tried to do opposite of it, in hope of reenabling the text highlighting.

  • Thru CSS, with this as reference. I tried to do the reverse, by doing -webkit-user-select:text !important, but somehow it doesn't appear on the style attribute of that element which i put this on. I tested this again on Chrome's inspector, adding the css line manually to the said element (in this case the datapanel block), but somehow it got rejected out (it didn't appear inside the inspector's Styles. Usually if the css line is not working or being overridden, Chrome inspector will just slash the css line out). I tried add the css line above to the parent block (the mainpanel) and it appears on the style attribute, but it was slashed.
  • Using z-index, in case if the datapanel block was under a transparent layer with higher z-index (which i couldn't find any inside the Inspector). I tried to set datapanel block to z-index:10000000 but still didn't work.
  • Thru javascript, using this as reference, but didn't work too.
  • Checking all over the html, javascript and css for that page, but nothing suggested that the page is highlight-disabled thru html, css or js.

Somehow i feel lost in here. Anyone here has any idea on why the solutions above wouldn't work.

Community
  • 1
  • 1
Fred A
  • 820
  • 10
  • 29
  • 1
    The CSS constrain you're looking for is `user-select`, you need to set it to `auto` or `text`. Ex: `user-select:auto`. More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select The `-webkit-` is the prefix for `FireFox` so maybe that is why it is not working on Chrome. – Titus Oct 10 '16 at 06:07
  • I don't think anyone is able to help you without knowing _how did they do it_. It only comes down to guissing. – Kilian Stinson Oct 10 '16 at 06:07
  • Take a look [here](http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css#4407335). Can you set the CSS inside a style-attribute directly? – Syntac Oct 10 '16 at 06:09
  • @Titus What is `-moz` then for? – Teemu Oct 10 '16 at 06:09
  • @Teemu Oh, It is too early for me, I guess I'm confusing the prefixes. – Titus Oct 10 '16 at 06:11
  • @KilianStinson that is the exact problem. The solutions to disable highlighting on page aren't that much, just on css and javascript to my best knowledge, but i found none of it being used in the page. Maybe there are other solutions that i didn't know of? Is there any javascript library out there that can disable highlighting on page, and cannot be overridden by css or js? – Fred A Oct 10 '16 at 06:20
  • @FredA Can you select the text via inspector? Maybe they set the highlight color to transparent? How exactly is it _disabled_? Maybe they just didn't change the cursor to caret. – Kilian Stinson Oct 10 '16 at 06:23
  • @Syntac i can set it to one of the child element inside the datapanel block, but at it seems that the -webkit-user-select: text !important is not being overridden, but still it didn't affect that child element. The whole datapanel is still highlight-disabled. – Fred A Oct 10 '16 at 06:30
  • @KilianStinson yes i could. Its a big question to me. I tried every method i knew on how to disable highlighting.. but none of it worked for me. – Fred A Oct 11 '16 at 08:30

0 Answers0