JavaScript表单自动填充故障：getElementsByName/id无法正常生效

我用Chrome插件通过JavaScript规则实现网页表单字段从剪贴板自动填充，其中一个字段可以正常工作，但另一个字段始终无法填充。尝试把getElementsByName换成getElementsById也没用。

可正常运行的代码 #

HTML #

<input id="repeatEmail" type="text" name="repeatEmail" autocomplete="chrome-off" maxlength="50" class="register__input" style="border: 1px solid rgb(170, 170, 170) !important;">

JavaScript #

setTimeout(async function GetClip() {
  let ctext = await window.navigator.clipboard.readText()
  console.log('Clipboard: ' + ctext);
  document.getElementsByName("repeatEmail")[0].value = ctext;
}, 1000)

无法运行的代码 #

HTML #

<input id="name" type="text" autocomplete="off" maxlength="28" class="register__input" style="border: 1px solid rgb(170, 170, 170) !important;">

JavaScript #

setTimeout(async function GetClip() {
  let ctext = await window.navigator.clipboard.readText()
  console.log('Clipboard: ' + ctext);
  document.getElementsByName("name")[0].value = ctext;
}, 1000)

原因分析与解决办法 #

1. 核心问题：无法运行的<input>标签没有name属性，document.getElementsByName("name")会返回空数组，访问[0]必然报错导致赋值失败。另外你之前尝试的getElementsById是错误的方法名，正确的是单数形式getElementById。
2. 两种修复方案：
   • 方案一：给目标<input>添加name属性，JS代码保持不变
     修改后的HTML：

     <input id="name" name="name" type="text" autocomplete="off" maxlength="28" class="register__input" style="border: 1px solid rgb(170, 170, 170) !important;">
     

   • 方案二：利用已有id属性获取元素，无需修改HTML
     修改后的JavaScript：

     setTimeout(async function GetClip() {
       let ctext = await window.navigator.clipboard.readText()
       console.log('Clipboard: ' + ctext);
       document.getElementById("name").value = ctext;
     }, 1000)
     

3. 额外排查建议：
   • 按F12打开浏览器控制台，查看是否有“无法读取null的value属性”这类报错，确认元素是否正确获取。
   • 如果页面加载慢，setTimeout的1秒延迟可能不够，可改用DOMContentLoaded事件确保元素加载完成后再执行代码：

     document.addEventListener('DOMContentLoaded', async function() {
       let ctext = await window.navigator.clipboard.readText()
       console.log('Clipboard: ' + ctext);
       document.getElementById("name").value = ctext;
     });
     

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