如何使用 getElementsbyTagName 从 <Input> 复制文本？

Question

我正在尝试创建一个不使用 ID 从输入文本字段复制文本的按钮。

我认为最好的方法是使用事件侦听器，然后在单击时激活将从输入值复制文本的功能。

HTML:

<div>
 <input type="text" value="copy this" readonly>
 <button type=button id='btn'>Copy URL</button>
</div>

JS:

  <script> 
  document.querySelect('#btn').addEventListener('click', function() {
   jimsFunction();
});
  
  function jimsFunction() {
  var copyText = document.getElementByTagName('input').value;
  copyText.select();
  copyText.setSelectionRange(0, 99999); 
  navigator.clipboard.writeText(copyText.value);
  alert("Copied: " + copyText.value);
  }    

</script>

有人可以指出我这里做错了什么吗？

谢谢

Answer 1

第一个到达 tag 的是 elements 。你被错过了 s

document.getElementByTagName ->document.getElemenstByTagName

循环元素并添加事件

试一试：

document.getElementById('btn').addEventListener('click', function() {
   jimsFunction(this)
});
let btns = document.getElementsByClassName('btn')
Array.from(btns).forEach(ele => {
  ele.addEventListener('click', function() {
   jimsFunction(this)
  });
})  
function jimsFunction(input) {
  let ele = input.previousElementSibling
  ele.select()
  ele.setSelectionRange(0, 99999)
  navigator.clipboard.writeText(ele.value)
  alert("Copied: " + ele.value)
}

<div>
 <input type="text" value="copy this" readonly>
 <button type=button id='btn'>Copy URL</button>
</div>
<div>
 <input type="text" value="text 1" readonly>
 <button type=button class='btn'>Copy URL</button>
</div>

<div>
 <input type="text" value="text 2 (different)" readonly>
 <button type=button class='btn'>Copy URL</button>
</div>

你重复了id，你应该改成class

如何使用 getElementsbyTagName 从 <Input> 复制文本？

How do I copy text from an <Input> by using getElementbyTagName?

javascript

copy

addeventlistener

buttonclick

getelementsbytagname