javascript - focus() 在 Chrome 中的 getUi().showSidebar html 中不起作用

Question

我正在使用自定义菜单栏功能在 Google 表格中打开一个包含表单的侧边栏。

我想要<textarea>每当侧边栏打开时就获得焦点(以便光标位于其中，并且任何键入都会立即添加到其中)。但使用focus()不管用。 (将样式应用于它正在工作，如下一行所示。)

请问我怎样才能做到这一点？非常感谢您的帮助。

注意:它无法在 Chrome (Win 10) 中运行，但可以在 Firefox 中运行。

function abc() {
    var html = 
    '<form id="form">' + 
    '<textarea id="title"> </textarea> '+ 
    '</form> <button>Submit</button> '+
    '<script>'+
    ' document.getElementById("title").focus(); '+ // << NOT WORKING 
    ' document.getElementById("title").style.outline ="solid 2px red"' +  // << WORKING
    ' </script>'+
    '';

  var a = HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setTitle('MY-FORM')
  SpreadsheetApp.getUi().showSidebar(a); 
}

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('My Functions')
  .addItem('Start', 'abc')
  .addSeparator()
  .addToUi();
}

Answer 1

您必须等待页面加载。

试试这个:

function abc() {
  var html ='<form><input type="text" id="title" name="title" /><br /><input type="button" value="Submit" onclick="google.script.run.processForm(this.parentNode);"/></form>';
  html+='<script>window.onload=function(){document.getElementById("title").focus();document.getElementById("title").style.outline="solid 2px red";}</script>';
  var ui=HtmlService.createHtmlOutput(html);
  SpreadsheetApp.getUi().showSidebar(ui); 
}

function processForm(obj) {
  console.log(JSON.stringify(obj));
  const ss=SpreadsheetApp.getActive();
  const sh=ss.getSheetByName('Sheet1');
  sh.getRange('A1').setValue(obj.title);
}

您还可以使用文本区域:

function abc() {
  var html ='<form><textarea rows="1" cols="15" id="title" name="title"></textarea><br /><input type="button" value="Submit" onclick="google.script.run.processForm(this.parentNode);"/></form>';
  html+='<script>window.onload=function(){document.getElementById("title").focus();document.getElementById("title").style.outline="solid 2px red";}</script>';
  var ui=HtmlService.createHtmlOutput(html);
  SpreadsheetApp.getUi().showSidebar(ui); 
}