如何删除 copyToClipboard 函数前后的中断

问题描述 投票:0回答:1

这是我第一次在这个论坛上发帖,但我已经潜伏多年了。不管怎样,我正在制作一个非常简单的工具,并且需要一些帮助。我已经很长时间没有编码了,所以请原谅我的格式和可能可怕的多余代码。我遇到的问题是,当我在 #1 中输入文本,然后在 #2 上选择一个将两个字段连接在一起的站点,最后选择副本并在 #3 上重置时,效果很好。问题是,它在生成的 URL 之前和之后添加了一个中断。我尝试了无数种不同的方法来阻止它们,只是为了仅复制连接的 URL,但我的技能还达不到要求。我确信对于本网站上的大多数(如果不是全部)来说,这都是一个简单的修复,所以提前致谢!

此外,如果有人有任何想法如何减少其他任何事情以使其更加高效和简单,我会倾听。

谢谢!

<!DOCTYPE html>
<html>
<head>
<style>

input[type=text]
{
    width: 100%;
    font-size: 15px;
    padding: 10px;
    margin: 0px;
    box-sizing: border-box;
    background-color: #D5DBDB;
    border: 2px solid #232F3E;
    border-radius: 5px;
}

.button
{
    border-radius: 5px;
    background-color: #D5DBDB;
    border: 2px solid #232F3E;
    color: black;
    text-aline: center;
    font-size: 15px;
    padding: 10px;
    width: 150px;
    transition: all 0.3s;
    cursor: pointer;
    margin: 5px;
}

.button:hover
{
    background-color: #232F3E;
    border: 2px solid #FF9900;
    color: white;
}

.button:focus
{
    background-color: #FF9900;
    color: black;
}

p
{
    border-left: 10px solid red;
    background-color: #D5DBDB;
    border-radius: 5px;
    text-indent: 5px;
    font-size: 12.5px;
    width: 100%;
}

div
{
    text-align: right;
}

</style>
</head>
<body>

<font size="3"><b>1:</b> Input field for XXXXXXX:</font><br><br>
<input type="text" id="testurlinput" placeholder="never provide XXXXXXX to XXXXXXX">
<br><br><hr><br>

<font size="3"><b>2:</b> Select the site:</font><br><br>
<button class="button" onclick="myFunction('http://www.google.com/')">Google</button>
<button class="button" onclick="myFunction('http://x.com/')">X (<i>Twitter</i>)</button>
<button class="button" onclick="myFunction('http://www.facebook.com/')">Facebook</button>
<button class="button" onclick="myFunction('http://www.instagram.com/')">Instagram</button>
<button class="button" onclick="myFunction('https://bsky.app/')">Bluesky</button><br>
<hr><br>

<font size="3"><b>3:</b> Provide XXXXXXX with the following XXXXXXX:</font>
<p id="testlink"></p>
<button class="button" onclick="copyToClipboard('testlink')">Copy Link &<br>Reset Page</button>
<br><br><hr><br>

<hr>

<script>
function myFunction(a)
{
    var z = document.getElementById("testurlinput").value;
    document.getElementById("testlink").innerHTML = a + z;
}
</script>

<script>
function copyToClipboard(id)
{
    var from = document.getElementById(id);
    var range = document.createRange();
    window.getSelection().removeAllRanges();
    range.selectNode(from);
    window.getSelection().addRange(range);
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
    window.location.reload();
}
</script>
</body>
</html>

目标只是解决开头和结尾的中断问题,以便得到一个干净的 URL。至于我尝试过的,我已经尝试了多种不同的函数格式,但没有成功。

在提交之前,我什至在“查看 Stack Overflow 上已有的问题以查看您的问题是否重复”下查看了更多内容。部分。还是什么都没有。

javascript html css element
1个回答
0
投票

我只关注文本/或值,而不是整个 html 元素——这可能会导致

break before and a break after the generated URL

出现问题

未经测试的解决方案,如有任何问题请告诉我

function copyToClipboard() {
    let textToCopy = document.getElementById("testlink").innerText;
    let tempInput = document.createElement("input");
    document.body.appendChild(tempInput);
    tempInput.value = textToCopy;
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
    window.location.reload();
}

© www.soinside.com 2019 - 2024. All rights reserved.