Question

附加组件的多数性很好，但是每当我按下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提交表格，但是在这种情况下，它所做的只是将表格空白，而我所拥有的只是白度:( plz help MEH

这是完整源代码的链接（不知道这是否行得通，因为我在学区中）（https://script.google.com/a/bcsdschools.net/d/1_YUx4ZP3qEWVcFMc-MvfEYX2S34r7-b4M0iRlE_JQa81T3ZubN5OeISa/edit 请让我知道这是否行不通。

Answer 1

问题

按enter键会导致表单提交（由于其客户端与服务器之间的通信实现，因此在应用程序脚本中明确禁止使用此键。）

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

如果键为preventDefault()，则将keydown添加到enter事件中（顺便说一句，不赞成使用keypress事件，请参见MDN上的reference，使用{{ 1}} / keydown代替）：

keyup

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

您可以改为监听表单上的function handle(e){ if(e.keyCode === 13) { e.preventDefault(); document.getElementById('submitbuttcontainer').click(); } }事件，并调用submit作为事件处理程序中的唯一语句，或者如果希望表单在{{ 1}}键击：

preventDefault()

建议

请使用enter而不是//assumption: form is initiated elsewhere in code; form.addEventListener('submit', (event) => { event.preventDefault(); //handle submission; });属性。这种方式更加灵活，并且具有简洁易读的优点。

参考

在应用程序脚本guide中处理表单；
为什么使用addEventListener-MDN reference;

Answer 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")
}

为什么在按Enter键时脚本会冻结

2 个答案: