Avoid copy from part of a text in HTML avoiding unnecessary content?
I am developing an html page that displays results for a given question.
I want people to be able to copy paste at their will, if they wish. Part of the text though is not useful. It's only comments about the results. I want to avoid that text from being copied. Only to facilitate work and not to hide or protect it.
I've seen other questions on SO like Prevent copying text in web-page
But these focus more on either protecting full pages or large areas of text from being copied. I want to avoid only small portions within copiable html.
How can I achieve a clean copy paste from text in an html page avoiding unnecessary content?
css cross-browser copy-paste
asked Jan 1 at 19:32
nsnnsn
1248
add a comment |
I am developing an html page that displays results for a given question.
I want people to be able to copy paste at their will, if they wish. Part of the text though is not useful. It's only comments about the results. I want to avoid that text from being copied. Only to facilitate work and not to hide or protect it.
I've seen other questions on SO like Prevent copying text in web-page
But these focus more on either protecting full pages or large areas of text from being copied. I want to avoid only small portions within copiable html.
How can I achieve a clean copy paste from text in an html page avoiding unnecessary content?
css cross-browser copy-paste
asked Jan 1 at 19:32
nsnnsn
1248
add a comment |
I am developing an html page that displays results for a given question.
I want people to be able to copy paste at their will, if they wish. Part of the text though is not useful. It's only comments about the results. I want to avoid that text from being copied. Only to facilitate work and not to hide or protect it.
I've seen other questions on SO like Prevent copying text in web-page
But these focus more on either protecting full pages or large areas of text from being copied. I want to avoid only small portions within copiable html.
How can I achieve a clean copy paste from text in an html page avoiding unnecessary content?
css cross-browser copy-paste
asked Jan 1 at 19:32
nsnnsn
1248
I am developing an html page that displays results for a given question.
I want people to be able to copy paste at their will, if they wish. Part of the text though is not useful. It's only comments about the results. I want to avoid that text from being copied. Only to facilitate work and not to hide or protect it.
I've seen other questions on SO like Prevent copying text in web-page
But these focus more on either protecting full pages or large areas of text from being copied. I want to avoid only small portions within copiable html.
How can I achieve a clean copy paste from text in an html page avoiding unnecessary content?
css cross-browser copy-paste
css cross-browser copy-paste
asked Jan 1 at 19:32
nsnnsn
1248
asked Jan 1 at 19:32
nsnnsn
1248
edited Jan 3 at 9:03
nsn
asked Jan 1 at 19:32
nsnnsn
1248
asked Jan 1 at 19:32
nsnnsn
1248
asked Jan 1 at 19:32
nsnnsn
1248
1248
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can use pseudo element in order to show content that we cannot copy/paste:
div::after {
content:attr(data-comments);
}<div data-comments="comments that cannot copy paste">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus. Fusce in egestas ex. Etiam tincidunt lacus sit amet lorem rutrum mollis ac pellentesque ligula.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus.
</div>answered Jan 1 at 19:38
Temani AfifTemani Afif
75.8k94487
Thanks. I will try that. Can you put html there?
– nsn
Jan 1 at 22:59
@nsn it depends on the HTML you want but you can always style the pseudo element like any html element
– Temani Afif
Jan 1 at 23:01
It's a bit complex. I want to add a couple of html tags/data, some hidden. These would be opened on mouse over. For simple text, your solution is very nice. For more complex setups, it might not be enough (or it becomes ugly).
– nsn
Jan 3 at 8:59
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998334%2favoid-copy-from-part-of-a-text-in-html-avoiding-unnecessary-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use pseudo element in order to show content that we cannot copy/paste:
div::after {
content:attr(data-comments);
}<div data-comments="comments that cannot copy paste">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus. Fusce in egestas ex. Etiam tincidunt lacus sit amet lorem rutrum mollis ac pellentesque ligula.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus.
</div>answered Jan 1 at 19:38
Temani AfifTemani Afif
75.8k94487
Thanks. I will try that. Can you put html there?
– nsn
Jan 1 at 22:59
@nsn it depends on the HTML you want but you can always style the pseudo element like any html element
– Temani Afif
Jan 1 at 23:01
It's a bit complex. I want to add a couple of html tags/data, some hidden. These would be opened on mouse over. For simple text, your solution is very nice. For more complex setups, it might not be enough (or it becomes ugly).
– nsn
Jan 3 at 8:59
add a comment |
You can use pseudo element in order to show content that we cannot copy/paste:
div::after {
content:attr(data-comments);
}<div data-comments="comments that cannot copy paste">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus. Fusce in egestas ex. Etiam tincidunt lacus sit amet lorem rutrum mollis ac pellentesque ligula.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus.
</div>answered Jan 1 at 19:38
Temani AfifTemani Afif
75.8k94487
Thanks. I will try that. Can you put html there?
– nsn
Jan 1 at 22:59
@nsn it depends on the HTML you want but you can always style the pseudo element like any html element
– Temani Afif
Jan 1 at 23:01
It's a bit complex. I want to add a couple of html tags/data, some hidden. These would be opened on mouse over. For simple text, your solution is very nice. For more complex setups, it might not be enough (or it becomes ugly).
– nsn
Jan 3 at 8:59
add a comment |
You can use pseudo element in order to show content that we cannot copy/paste:
div::after {
content:attr(data-comments);
}<div data-comments="comments that cannot copy paste">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus. Fusce in egestas ex. Etiam tincidunt lacus sit amet lorem rutrum mollis ac pellentesque ligula.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus.
</div>answered Jan 1 at 19:38
Temani AfifTemani Afif
75.8k94487
You can use pseudo element in order to show content that we cannot copy/paste:
div::after {
content:attr(data-comments);
}<div data-comments="comments that cannot copy paste">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus. Fusce in egestas ex. Etiam tincidunt lacus sit amet lorem rutrum mollis ac pellentesque ligula.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus.
</div>div::after {
content:attr(data-comments);
}<div data-comments="comments that cannot copy paste">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus. Fusce in egestas ex. Etiam tincidunt lacus sit amet lorem rutrum mollis ac pellentesque ligula.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus.
</div>div::after {
content:attr(data-comments);
}<div data-comments="comments that cannot copy paste">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus. Fusce in egestas ex. Etiam tincidunt lacus sit amet lorem rutrum mollis ac pellentesque ligula.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac nibh vitae ex posuere rhoncus.
</div>answered Jan 1 at 19:38
Temani AfifTemani Afif
75.8k94487
answered Jan 1 at 19:38
Temani AfifTemani Afif
75.8k94487
answered Jan 1 at 19:38
Temani AfifTemani Afif
75.8k94487
answered Jan 1 at 19:38
Temani AfifTemani Afif
75.8k94487
75.8k94487
Thanks. I will try that. Can you put html there?
– nsn
Jan 1 at 22:59
@nsn it depends on the HTML you want but you can always style the pseudo element like any html element
– Temani Afif
Jan 1 at 23:01
It's a bit complex. I want to add a couple of html tags/data, some hidden. These would be opened on mouse over. For simple text, your solution is very nice. For more complex setups, it might not be enough (or it becomes ugly).
– nsn
Jan 3 at 8:59
add a comment |
Thanks. I will try that. Can you put html there?
– nsn
Jan 1 at 22:59
@nsn it depends on the HTML you want but you can always style the pseudo element like any html element
– Temani Afif
Jan 1 at 23:01
It's a bit complex. I want to add a couple of html tags/data, some hidden. These would be opened on mouse over. For simple text, your solution is very nice. For more complex setups, it might not be enough (or it becomes ugly).
– nsn
Jan 3 at 8:59
Thanks. I will try that. Can you put html there?
– nsn
Jan 1 at 22:59
Thanks. I will try that. Can you put html there?
– nsn
Jan 1 at 22:59
@nsn it depends on the HTML you want but you can always style the pseudo element like any html element
– Temani Afif
Jan 1 at 23:01
@nsn it depends on the HTML you want but you can always style the pseudo element like any html element
– Temani Afif
Jan 1 at 23:01
It's a bit complex. I want to add a couple of html tags/data, some hidden. These would be opened on mouse over. For simple text, your solution is very nice. For more complex setups, it might not be enough (or it becomes ugly).
– nsn
Jan 3 at 8:59
It's a bit complex. I want to add a couple of html tags/data, some hidden. These would be opened on mouse over. For simple text, your solution is very nice. For more complex setups, it might not be enough (or it becomes ugly).
– nsn
Jan 3 at 8:59
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998334%2favoid-copy-from-part-of-a-text-in-html-avoiding-unnecessary-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
