如何为Google Web App脚本实现表单输入框自动聚焦功能？

失效原因 #

Google Web App的前端页面默认运行在谷歌提供的iframe沙箱环境中，原生autofocus属性会被沙箱安全规则拦截，无法直接生效，需要通过JS手动触发聚焦逻辑。

修复后的完整代码 #

<!DOCTYPE html> 
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head> 
<body>
    <form>
      <h1>Enter Loan Details</h1>
      <br>
      <label for="multiInput">Scan Number / Name or Hardware Tag</label>
      <input type="text" id="multiInput" name="multiInput">
    </form>
    <script>
        // 页面完全加载后手动触发聚焦
        window.addEventListener('load', () => {
            document.getElementById('multiInput').focus();
        });
    </script>
</body> 
</html>

兼容兜底方案 #

如果部分设备或沙箱规则更新后上述代码仍不生效，可以添加短延时作为兜底：

window.addEventListener('load', () => {
    // 100ms延时避开沙箱初始渲染的规则拦截
    setTimeout(() => {
        document.getElementById('multiInput').focus();
    }, 100);
});

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