gpt4 book ai didi

html 从剪贴板副本中排除文本

转载 作者:太空狗 更新时间:2023-10-29 15:14:08 29 4
gpt4 key购买 nike

我在另一个跨度内有一个跨度。我想让用户能够从父跨度中选择文本,但不能从子跨度中选择文本。

注意:user-select (family) 不起作用。它会阻止选择在此区域开始或结束,但如果我用来自父跨度的文本中的选择围绕它,文本仍然在最终剪贴板结果中。

例如:

<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>

最佳答案

我有类似的需求,我对尚未输入的文本使用了占位符。但是,如果用户想要复制该文本 block ,他们将永远不会想要复制文本中的占位符。我提出了以下解决方案。

这是一个示例,它使用了一些 jquery 但可以替换

CSS(不是真的需要只是为了好玩)

div.copying { background-color: yellow; }
div.copying .nocopy { display: none; }

HTML(注意:如果你想应用到整个页面,移动oncopy到)

<body>
<div>text not related to the copy, dont select this</div>
<div oncopy="handleHideCopy(this);" class="container">
<span>the text between &gt;<span class="nocopy"> I don't want this text copied </span><span>&lt; 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);
}

之所以可行,是因为在复制发生之前在父元素上调用了 oncopy,并且实际上必须删除必须隐藏的内容,因为 display:none 对复制绝对没有任何作用。

与其对大量 html 使用 innerHTML,不如使用更有针对性的 DOM 删除/插入来删除内容并将其放回原处。我没有方便的示例。

关于html 从剪贴板副本中排除文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22159929/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com