Google Apps Script HTML - 如何从整个文档而不是按钮触发键盘事件？答案

【问题标题】：Google Apps Script HTML - How to make a keyboard event trigger from an entire document rather than just a button?Google Apps Script HTML - 如何从整个文档而不是按钮触发键盘事件？
【发布时间】：2015-06-07 04:05:14
【问题描述】：

对于 Google Docs 的 Google Apps 脚本，我在 Sidebar.html 文件中使用此代码（经过简化以删除不相关的部分）：

<div class="sidebar branding-below">
  <form>
   <div class="block" id="button-bar">
      <button id="some-action" class="action">Action</button>
    </div>
  </form>
</div>

<script>

  $(function() {
    $('#some-action').click(doSomething);           //call the method below on button click
    google.script.run.withSuccessHandler(loadPreferences)
        .withFailureHandler(showError).getPreferences();  //not sure what this does
  });

  $(document).keydown(function(e){             //only applies to button??
    //output whatever key was pressed under the button
    var div = $('<div id="clickmsg" class="text">' + 'KeyPressed: ' + e.which + '</div>');
    $('#button-bar').after(div);
    //Detect CTRL + q keydown combo, which should be unused in windows and chrome
    if(e.ctrlKey && e.keyCode == 81){
      var div = $('<div id="clickmsg" class="text">' + 'Ctrl+Q detected' + '</div>');
      $('#button-bar').after(div);
      doSomething();                           //calls the method below
    }
  });

  function doSomething() {
    this.disabled = true;
    $('#error').remove();
    google.script.run
        [some code...] //doStuff
  }
</script>

doSomething() 仅在我点击按钮时触发。因此，只要按钮仍在选项卡式选择下，我正在按下的键就会显示在它的下方。但是，在我没有tab到按钮的任何情况下，无论按什么键，这个按键代码都不会输出任何东西。

请注意，我使用 $(document).keydown，但从未在任何地方定义“文档”。但是，不知何故，它会自动绑定到侧边栏中的按钮。为什么会发生这种情况，而不是返回错误？如何让它检测所有谷歌文档中的键盘快捷键，即使用户只是打字？ HTML 甚至是检测这种情况的正确方法吗？

我知道这（可能）是可能的，因为这篇文章是关于我使用来自issue here 的键绑定代码的问题，其中发布脚趾代码的人说“HtmlService 中的新 IFRAME 模式确实允许要传递给附加组件的关键代码”，只要用户“首先单击 [ed] / 激活 [d] 侧边栏。”

【问题讨论】：

标签： javascript html google-apps-script scope keyboard-events

【解决方案1】：

您的 HTML 被 HTML 服务包装，如下所示：

<iframe>
  <!DOCTYPE html>
    <more boilerplate...>
    ...

      your html

     ...
</iframe>

因此，document 已定义，并且范围仅限于 iframe。由于您的表单中只有一个元素，因此document 必须有焦点才能接收事件。

如果您的意图是捕获 Google 文档中的所有击键，您将无法在 Google Apps 脚本中执行此操作。不过，浏览器扩展程序或许可以。

【讨论】：