gpt4 book ai didi

javascript - 使用零宽度空间和 execCommand ("copy"时发生冲突)

转载 作者:太空宇宙 更新时间:2023-11-04 02:23:58 39 4
gpt4 key购买 nike

我会尽可能简单地解释我的意思。我想向用户显示一个弹出窗口,其中包含要复制的 url 链接(动态创建),例如(实际上文本要长得多):

var url = "http://myweb.com/en/​728,​1,​5a2a16,​5e4f4f,​4a3f7a,​12,​12";

为了正确显示它(我的意思是很好地打破这一行以适合弹出窗口)我使用零宽度空间 所以代码看起来像这样:

var url = "http://myweb.com/en/​728,​​1,​​5a2a16,​​5e4f4f,​​4a3f7a,​​12,​​12";
$("#content").html(url);

接下来,当弹出窗口出现时,我可以通过选择所有内容并使用 ctrl+c 来复制此文本,或者只需单击一个按钮来自动复制,我将其用于一段谷歌代码:

window.getSelection().removeAllRanges();
var seltext = document.querySelector("#content");
var range = document.createRange();
range.selectNode(seltext);
window.getSelection().addRange(range);
var successful = document.execCommand("copy");

问题开始于我复制 URL(无论哪种方式)并将其粘贴到浏览器中并按回车键,之后我得到了这个:

The requested URL myweb.com/en/728,​1,​5a2a16,​5e4f4f,​4a3f7a,​12,​12,​12 was not found on this server.

当我删除零宽度空格字符并使用 $("#content").text(url); (文本而不是 html)时,问题消失了,但随后我遇到了另一个问题正确的长换行。有人知道如何让这些东西一起工作吗? (因此该行将在我想要的区域中断 - 在逗号和复制功能之后不会复制任何额外的字符,只有用户在屏幕上看到的内容)

最佳答案

我认为最好的解决方案是为此使用 CSS。注意在Firefox&IE中必须将anchor的display属性设置为block,否则无法断词。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test 1</title>
<style type="text/css">
a { word-break: break-all; width: 150px; display: block;}
</style>
</head>

<body>
<a href="http://www">http://www.domain.com/TherearemanyvariationsofpassagesofLoremIpsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumour,orrandomisedwordswhichdon'tlookevenslightlybelievable.IfyouaregoingtouseapassageofLoremIpsum,youneedtobesurethereisn'tanythingembarrassinghiddeninthemiddleoftext.AlltheLoremIpsumgeneratorsontheInternettendtorepeatpredefinedchunksasnecessary,makingthisthefirsttruegeneratorontheInternet.Itusesadictionaryofover200Latinwords,combinedwithahandfulofmodelsentencestructures,togenerateLoremIpsumwhichlooksreasonable.ThegeneratedLoremIpsumisthereforealwaysfreefromrepetition,injectedhumour,ornoncharacteristicwordsetc</a>
</body>
</html>

这种方法将为您提供 CTRL+CexecCommand("copy") 的解决方案,因为 url 并没有真正改变。

如果您不能使用这种方法 - 您应该在调用 execCommand 之前从字符串中删除空白字符,以确保复制剥离的字符串。

如果您真的想要 execCommand(而不是 CSS 版本),您可以使用以下代码:

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test 2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
a { word-break: break-all; width: 150px; display: block;}
.hidden {font-size:1px; width: 1px; height: 1px; overflow: hidden; position: absolute; left: -100000px; top: -10000px;}
</style>
<script type="text/javascript">
var preventDoubleCall = false;
function copyWrapper() {
if (preventDoubleCall) {
preventDoubleCall = false;
return;
}
$('.hidden').text($('a').text().replace(/,/g, "This is the text to replace"))
window.getSelection().removeAllRanges();
var seltext = $(".hidden")[0];
var range = document.createRange();
range.selectNode(seltext);
window.getSelection().addRange(range);
preventDoubleCall = true;
var successful = document.execCommand("copy");
}
$(function(){
$(document).bind('copy', function() {
copyWrapper();
});
$('#click-to-copy').click(function() {
copyWrapper();
});
});
</script>
</head>

<body>
<a href="http://www">http://www.domain.com/TherearemanyvariationsofpassagesofLoremIpsumavailable,butthemajorityhavesufferedalterationinsomeform,byinjectedhumour,orrandomisedwordswhichdon'tlookevenslightlybelievable.IfyouaregoingtouseapassageofLoremIpsum,youneedtobesurethereisn'tanythingembarrassinghiddeninthemiddleoftext.AlltheLoremIpsumgeneratorsontheInternettendtorepeatpredefinedchunksasnecessary,makingthisthefirsttruegeneratorontheInternet.Itusesadictionaryofover200Latinwords,combinedwithahandfulofmodelsentencestructures,togenerateLoremIpsumwhichlooksreasonable.ThegeneratedLoremIpsumisthereforealwaysfreefromrepetition,injectedhumour,ornoncharacteristicwordsetc</a>
<div class="hidden"></div>
<button id="click-to-copy">Click here to copy</button>
</body>
</html>

您应该将替换行更改为您想要替换的文本(换行符/逗号/等等)。我不得不使用“视野之外”的方法,因为你不能复制隐藏元素上的文本。无论您选择了哪个部分,代码都会复制您想要的文本。如果你想改变它,那么文本将只包含你选择的原始部分(而不是 anchor 内的所有文本)。

关于javascript - 使用零宽度空间和 execCommand ("copy"时发生冲突),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37635719/

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