onclick调用复制函数获取输入框id返回null 如何正常实现剪贴板复制

问题原因 #

你传入copyToClipboard的参数e是当前点击的按钮元素本身，你的按钮并未设置和对应输入框一致的id属性，因此用e.id作为参数查询DOM元素时自然返回null。

解决方案 #

方案1：通过DOM节点关系直接获取输入框（推荐，无需修改HTML） #

直接利用按钮和输入框同属一个父容器、且输入框是按钮的前一个相邻元素的特性获取元素，同时替换已废弃的document.execCommand为新版剪贴板API：

function copyToClipboard(btnElement) {
  // 直接获取按钮前一个相邻的输入框元素
  const textBox = btnElement.previousElementSibling;
  textBox.select();
  // 兼容移动端长文本选中
  textBox.setSelectionRange(0, textBox.value.length);
  // 写入剪贴板
  navigator.clipboard.writeText(textBox.value);
}

方案2：通过自定义属性绑定目标输入框ID #

如果需要明确绑定ID避免DOM结构变化导致的选择错误，可以给按钮增加data-target自定义属性存储对应输入框的ID：
修改HTML代码：

<div class="form-inline m-2">
  <input type="text" class="form-inline" name="myvalue" id="{{ p.id }}" value="https://diccionarioespañol.com/significado/{{ p.nombre|lower }}/" readonly />
  <!-- 新增data-target属性，值和输入框id一致 -->
  <button data-target="{{ p.id }}" onclick="copyToClipboard(this)">📋</button>
</div>

对应修改JS代码：

function copyToClipboard(btnElement) {
  const targetId = btnElement.dataset.target;
  const textBox = document.getElementById(targetId);
  textBox.select();
  textBox.setSelectionRange(0, textBox.value.length);
  navigator.clipboard.writeText(textBox.value);
}

内容的提问来源于stack exchange，提问作者nadermx