为什么当我按 Enter 时我的脚本会冻结？答案

【问题标题】：Why Is my script freezing up when I hit enter?为什么当我按 Enter 时我的脚本会冻结？
【发布时间】：2020-01-03 22:28:08
【问题描述】：

插件的大部分内容都很好，但是每当我按 Enter 键时（在我看来，这是提交表单的最常见方式，例如登录表单），但它所做的一切都是空白。

我尝试将脚本与 onkeydown 链接，如下所示：

<div onkeydown="handle(event)">blagh blagh blagh</div>

但我仍然得到相同的结果：

<html>
<form id='myForm' style="font-family:Georgia;">

<table>
<tr><td><h2>Enter your Password</h2></td></tr>
<tr><td><p>DO NOT HIT ENTER ON YOUR KEYBOARD!!!!!</p></td></tr>
<tr><td><input name='password' type='password' value="" onkeypress="handle(event)"></td></tr>
<tr><td><div id="submitbuttcontainer"><img id="submitloader" style="display:none;" src='https://lh6.googleusercontent.com/-S87nMBe6KWE/TuB9dR48F0I/AAAAAAAAByQ/0Z96LirzDqg/s27/load.gif' /><input id="submitbutt" type='button' onclick='showWorking();google.script.run.withSuccessHandler(onSuccess).decodeForRequest(document.getElementById("myForm"));' name="Submit" value="Submit"></div></td></tr>
</table>

</form>
<script>
function onSuccess(obj) {
  document.getElementById('submitbutt').style.display="block";
  document.getElementById('submitloader').style.display="none";
  if(obj.status == 'success') {
    google.script.host.closeDialog();
    browser.msgbox('Access Granted', browser.buttons.OK)
   }
   else { 
    browser.msgbox('ALERT!!','!OOF!','Incorrect Password. Please retry', browser.buttons.OK);
   }
}
function showWorking() {
  document.getElementById('submitbutt').style.display="none";
  document.getElementById('submitloader').style.display="block";
}

function handle(e){
        if(e.keyCode === 13)
document.getElementById('submitbuttcontainer').click();
        }
</script>
</html>

我要做的就是让表单在我按 Enter 键时提交，而不是空白。我总是按 Enter 来提交表单，但在这种情况下，它所做的只是将表单清空，而我所拥有的只是白度。

这是完整源代码的链接（不知道这是否可行，因为我在学区）：

https://script.google.com/a/bcsdschools.net/d/1_YUx4ZP3qEWVcFMc-MvfEYX2S34r7-b4M0iRlE_JQa81T3ZubN5OeISa/edit)

【问题讨论】：

标签： forms google-apps-script google-sheets web-applications

【解决方案1】：

问题

点击enter 键会导致表单提交（由于其客户端到服务器的通信实现，Apps 脚本中明确禁止这样做）。

解决方案 1 - 单独处理输入

如果键是 enter，则将 preventDefault() 添加到 keydown 事件（顺便说一句，keypress 事件已弃用，请参阅 MDN 上的 reference，改用 keydown / keyup）：

var ENTER_CODE = 13;

function handle(e) {
  if(e.keyCode === ENTER_CODE) {
    e.preventDefault();
    document.getElementById('submitbuttcontainer').click();
  }
}

解决方案 2 - 处理表单提交

您可以在您的表单上侦听submit 事件，并调用preventDefault() 作为事件处理程序中的唯一语句，或者如果您希望表单在enter 键击中提交，则同时处理表单提交：

//assumption: form is initiated elsewhere in code;
form.addEventListener('submit', (event) => {
  event.preventDefault();

  //handle submission;
});

您还可以阻止提交所有表单以使设置灵活：

(() => {
  const { forms } = document;

  Object.values(forms).forEach(
    form => form.addEventListener("submit", (e) => e.preventDefault())
  );
})();

或者，或者，使用event delegation 并在document 上注册一个侦听器，因为事件会冒泡：

document.addEventListener("submit", (e) => e.preventDefault());

建议

请使用addEventListener 而不是on[event name here] 属性。这种方式更加灵活，并且具有简洁易读的优点。

参考文献

在 Apps 脚本中处理表单guide
为什么使用addEventListener？ MDNreference

【讨论】：

我怎么不知道“keypress”已被弃用>:(
Zachary，它实际上已经被弃用了一段时间，但这并不明显，除非您在需要时使用 MDN 或规范本身作为参考。例如，w3schools 列出它时没有任何弃用警告
顺便说一句，您成功解决了这个问题吗？我和 Cooper 的答案都归结为在 submit 事件处理程序中添加了 preventDefault() 作为第一条语句
@ZacharyCross - 嗯，很高兴知道你还在这里并修复它:) 最简单的方法是使用解决方案 #2 并覆盖所有“提交”事件 - 它们在GAS，因为您实际上无法“提交”表格
我刚开始学习 addEventListener ，我有点希望我会使用它们。因为你是对的，他们更灵活

【解决方案2】：

我想尝试给你一个完整的答案，但我不得不承认，我对事件处理程序的了解可能比你少。但这似乎对我有用。

aq4.html：

<html>
  <head>
    <script>
      window.onload=function() {
        preventFormSubmit1();
      }
      
      function preventFormSubmit1() {
        console.log('preventFormSubmit1');
        var form=document.forms['myForm'];
        form.addEventListener('submit',function(e) {
          e.preventDefault();
        });
      }
           
      function handleFormSubmit(formObject) {
        console.log('handleFormSubmit');
        var first=document.forms['myForm']['first'].value;
        var last=document.forms['myForm']['last'].value
        var sheet=document.forms['myForm']['sheet'].value;
        console.log('%s,%s,%s',first,last,sheet);
        if(first.length>0 && last.length>0 && sheet.length>0) {
          google.script.run
          .withSuccessHandler(function(msg){
            var div=document.getElementById('output');
            div.innerHTML=msg;  
            var inputs=document.querySelectorAll('input[type=text]');
            inputs[0].focus();
            for(var i=0;i<inputs.length;i++) {
              inputs[i].value='';
            }
          })
          .processForm(formObject);
        }else{
          alert("Invalid or Incomplete Data");
        }
      }
     
      console.log("MyCode");
    </script>
  </head>
  <body>
     <form id="myForm" onsubmit="handleFormSubmit(this)">
      <input type="text" name="first" /> First<br />
      <input type="text" name="last" /> Last<br />
      <select name="sheet">
        <option value="Sheet1">Sheet1</option>
        <option value="Sheet2">Sheet2</option>
      </select> Sheet<br />
      <input id="sub" type="submit" value="Submit" />
    </form>
    <div id="output"></div>
  </body>
</html>

aq1.gs：

function processForm(formObject) {
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName(formObject.sheet);
  sh.appendRow([formObject.first,formObject.last]);
  return Utilities.formatString('First: %s<br />Last: %s<br />Sheet: %s', formObject.first,formObject.last,formObject.sheet);
}

function runOne() {//This loads the dialog
  var userInterface=HtmlService.createHtmlOutputFromFile('aq4').setWidth(1000);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "My Form Example")
}

【讨论】：