Menu
I have a span inside another span. I would like to allow the user to be able to select the text from the parent span, but not the child one.
Note: user-select (family) does not work. It prevent the selection to start or end in this area, but the text is still in the end clipboard result if I surround it with the select in the text from the parent span.
For example:
<head>
<style>
.hole-hint {
display: inline-block;
position: absolute;
bottom: 45%;
font-size: 12px;
color:rgb(255, 0, 0);
background-color:rgba(255, 225, 225, 0.5);
z-index:1;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.hole {
padding-top: 7px;
position: relative;
background-color:#EEEEEE;
}
</style>
</head>
<body>
<span> this is the parent text<span class="hole"><span class="hole-hint">no copy</span></span>and this is text on the other side </span>
</body>
</html>
261
You can disable cut, copy, and paste using the oncut, oncopy, and onpaste event attributes with the target HTML elements. If you want to disable cut, copy, and paste for the complete web page, you need to use these event attributes with the body tag.
You can allow text selection, but prevent copy and cut functions using the oncopy, oncut and onpaste event attributes. By adding these attributes into a textbox's <input> tag, you can disable cut, copy and paste features. The user is left with the option to enter the field manually with these attributes set.
This process is done by copying or right-clicking on your website. If you are a website owner and would like to prevent your content from being copied, we recommend disabling copy and right-click buttons from posts and pages. Another way of copying a website content is by using hotkeys like Ctrl+V, Ctrl+C, Ctrl+A, etc.
Whether it is a sample of code or it is the User's own information, we can create a copy button to copy data to the clipboard using the navigator. clipboard. writeText() function. This function writes the data fed to it as a parameter into the clipboard.
I had a similar need, I used place holders for text that wasn't entered yet. However if the user wanted to copy that block of text they would never want the place holders in the copied text. I came up with the following solution.
Here is an example, it uses some jquery but that could be replaced
CSS (not really needed just for fun)
div.copying { background-color: yellow; }
div.copying .nocopy { display: none; }
HTML (Note: if you wanted to apply to the entire page, move oncopy to )
<body>
<div>text not related to the copy, dont select this</div>
<div oncopy="handleHideCopy(this);" class="container">
<span>the text between ><span class="nocopy"> I don't want this text copied </span><span>< will be excluded from copy, or at least in IE</span>
</div>
<div>and don't select this either</div>
</body>
JS
function handleHideCopy(el)
{
$(el).addClass('copying');
var innerHtml = el.innerHTML;
$(el).find('.nocopy').remove();
setTimeout(function(){
$(el).removeClass('copying');
$(el).children().remove();
el.innerHTML = innerHtml;
},300);
}
The reason why this works is because oncopy is called on the parent element before the copy takes place, and the content that must be hidden has to actually be removed, as display:none does absolutely nothing for copy.
Instead of using innerHTML for large amounts of html a more targeted DOM remove/insert should be used to remove the content and put it back where it belongs. I don't have an example handy for that.
69
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
