Menu
What JS/CSS trick can I use to prevent copy&paste of numbers in an ordered list?
<OL>
<LI>A
<LI>B
<LI>C
</OL>
If it's not doable, what alternative are available?
thanks
580
The copying of the numbers of an OL is a browser behaviour. I believe some browsers don't but most do.
You could use JavaScript to rewrite the code once the page loads so that it looks the same but isn't underneath. This would fix your copying problem but cause other problems such as accessibility.
Essentially the way to achieve it would be to rewrite the code in Javascript to be 2 columns, 1 with the numbering and 1 with the contents. You could do this with a grids system like YUI Grids or Blueprint. The user would be able to select the second column with the contents in it without selecting the first.
The issue with this is that it ruins the semantic markup for screen reader users and they no longer get the benefit of the ordered list. It might be possible to do it onmousedown so that only when the user tries to select the text you rewrite it. Not that I've tested that idea.
Disclaimer: I work for Yahoo!
99
You can't really control the clipboard behavior of the browser/OS. What you can do is provide a "Copy" link, and use jquery and the jquery.copy plugin.
<html>
<head>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script src="jquery.copy.js" type="text/javascript"></script>
</head>
<body>
<a href="#" onclick="$.copy($('#theList').find('li').text())">Copy</a>
<OL id="theList">
<LI>A
<LI>B
<LI>C
</OL>
</body>
</html>
Disclaimer: Above sample may not be 100% functional. ;-)
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
