从输入字段复制值

Question

我需要将输入字段中的值复制到剪贴板。我没有得到输入字段的值，而是得到了 null。

这是我的代码：

<input type="text" value=${model.anchor_url} id=${properties.anchor_name}>
<button class="c-button" onclick="myFunction()">
    <span class="c-button__label">Copy</span>
</button>
<div data-sly-test="${model.anchor_url}">
    <p>URL from Model :</p>
    <pre>${model.anchor_url}</pre>
</div>

function myFunction() {
    const field = document.getElementById(`${properties.anchor_name}`);
    navigator.clipboard.writeText(field);
    alert("Copied the text to clipboard: " + field);
}

field 变量的值结果为 null，即使 id 存在并且它有一个值。

Answer 1

感谢所有帮助。看来是由于跨站点脚本预防，我开发的站点无法从 html 执行 JS，但必须使用 TypeScript 构建。

Answer 2

你试图复制元素，而不是它的值，你必须使用element.value 获取它的值，如果field 变量的值为空，这意味着你试图获取的元素没有' t 与该元素 ID 存在

而且，你试图复制整个元素而不是它的值，所以用这个替换你函数中的第一行：

const field = document.getElementById(properties.anchor_name).value;

此外，您也无需在代码中添加模板文字，因为您也可以这样做！

例如假设有一个变量element_ID，它可以用JS这样写：

var element_ID = "myInput"

现在我想得到那个元素，所以我可以直接这样做：

document.getElementById(element_ID)

而不是这个：

document.getElementById(`${element_ID}`)

Answer 3

你会得到一个带有这一行的对象：document.getElementById(${properties.anchor_name})。使用参数value，您将从输入字段中获取值。

所以你必须尝试：

const field = document.getElementById(`${properties.anchor_name}`).value;