Question

以下google脚本创建了一个小型网站（从https://developers.google.com/apps-script/guides/html/templates复制）

function doGet() {
  return HtmlService
      .createTemplateFromFile('index.html')
      .evaluate();
}

相应的index.html（从https://www.w3schools.com/tags/att_button_autofocus.asp复制）

<!DOCTYPE html>
<html>
<body>

<button type="button" autofocus onclick="alert('Hello world!')">Click Me!</button>

<p><strong>Note:</strong> The autofocus attribute of the button tag is not supported in IE 9 and earlier versions.</p>

</body>
</html>

当我加载网站时，我希望按钮能够集中显示并在按ENTER键时显示“ Hello world”。但是按钮不是焦点，我需要用鼠标单击该按钮。我需要更改什么才能使自动对焦属性起作用？

Sample website

PS：大约一年前就可以使用

Answer 1

我确认使用autofocus时发生了Blocked autofocusing on a form control in a cross-origin subframe.错误。发现由此不能使按钮聚焦。不幸的是，在这种情况下，我找不到使用autofocus的方法。因此，为了避免出现此问题，该解决方法如何？请认为这只是几个答案之一。

在此替代方法中，使用focus()。

修改后的HTML：

<!DOCTYPE html>
<html>
<body>

<button type="button" id="button" onclick="alert('Hello world!')">Click Me!</button> <!-- Modified -->

<p><strong>Note:</strong> The autofocus attribute of the button tag is not supported in IE 9 and earlier versions.</p>

<script>
  document.getElementById('button').focus(); // Added
</script>
</body>
</html>

参考文献：

focus()

如果这不是您想要的方向，我深表歉意。

由Google脚本提供的HTML页面上的autofocus属性被忽略

1 个答案:

修改后的HTML：

参考文献：