Google Apps Script应用问题：输入框内容无法实时同步至禁用文本框

嘿，我懂你想实现的功能：用户在第一个输入框输入内容时，立刻同步到下方禁用的文本框里。你的代码逻辑本身没问题，但问题出在脚本执行的时机上！

问题根源 #

你把<script>标签放在了<head>里，这时候浏览器还没渲染<body>里的输入元素呢。当代码执行document.getElementById("one")时，它找不到这个元素，返回的是null，自然没法给它添加input事件监听器，后续的同步逻辑也就跑不起来了。

两种修复方案 #

方案1：把脚本移到<body>末尾

这是最简单的方法，等所有DOM元素都加载完成后再执行脚本：

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  three:<input type="text" id="one"/>
  four:<input disabled type="text" id="two"/>

  <!-- 把脚本放在body最后，确保DOM元素已加载 -->
  <script>
    document.getElementById("one").addEventListener("input", Check);
    function Check(){
      var Code = document.getElementById("one").value;
      document.getElementById("two").value = Code;
    }
  </script>
</body>
</html>

方案2：使用DOMContentLoaded事件监听

如果不想移动脚本位置，可以用DOMContentLoaded事件，等DOM完全加载后再绑定事件：

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script>
    // 监听DOM加载完成事件，再执行绑定逻辑
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById("one").addEventListener("input", Check);
      function Check(){
        var Code = document.getElementById("one").value;
        document.getElementById("two").value = Code;
      }
    });
  </script>
</head>
<body>
  three:<input type="text" id="one"/>
  four:<input disabled type="text" id="two"/>
</body>
</html>

额外小优化 #

你还可以简化Check函数，直接用事件对象获取输入值，不用重复查询元素：

function Check(e){
  document.getElementById("two").value = e.target.value;
}

这样修改后，你的实时同步功能就能正常工作啦～

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