html - 谷歌脚本提供的 HTML 页面上忽略了 autofocus 属性

标签 html google-apps-script

以下 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:大约一年前这曾经有效

最佳答案

我确认,在使用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>

引用文献:

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

关于html - 谷歌脚本提供的 HTML 页面上忽略了 autofocus 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58739300/

相关文章:

javascript - 允许我设置天气类型的JS

javascript - 实现模态工厂?

google-apps-script - 将多种字体颜色应用于单个 Google 表格单元格中的文本

java - 从网站复制到 JTextPane 会给我不需要的格式和 html 标签

javascript - jQuery:即使有滚动,如何使对话框保持在右上角?

html - flex 盒 : content rules the width?

javascript - Google App Script使用参数向另一个脚本发出get请求

javascript - 使用应用程序脚本从 Google Sheets 读取内容并将内容写入 Google Doc

javascript - 使用 Google Apps Script 从对话框中的输入字段返回值到 code.gs 中的 var

google-apps-script - 在 Google Apps 脚本中创建电子邮件 - 无法创建 ä、ö、ü 等特殊字符