使用 Enter 键提交从 NATIVE 转换为 IFRAME 沙盒答案

【问题标题】：Converting from NATIVE to IFRAME Sandbox with Enter Key Submit使用 Enter 键提交从 NATIVE 转换为 IFRAME 沙盒
【发布时间】：2015-12-18 15:10:57
【问题描述】：

在尝试将我的应用程序脚本 Web 应用程序转换为使用 IFRAME 沙盒时，我遇到了与 this post 类似的问题。我已按照建议转换为 'input = "button"'。

我的网络应用程序是供学生用来登录和退出学校图书馆的简单表单。该应用程序的想法是让学生使用起来尽可能简单。学生应输入他们的身份证号码并可以点击提交按钮或按回车键。然后他们的 ID 在被存储到电子表格之前经过验证，他们会收到一条消息，感谢您登录或退出，或者请输入有效的 ID 号。然后焦点应该返回到文本框并被清除，为下一个学生输入他们的 ID 做好准备。

我使用 NATIVE 模式让它按上述方式工作。当我尝试将其转换为 IFRAME 模式时，单击该按钮有效，但如果您按 Enter 键，所有内容都会消失，并且没有数据进入电子表格。 我怎样才能让按回车键与单击提交按钮一样工作？

index.html 代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<h3>Please Sign In &amp; Out</h3>
<div id="box" class="frame">
  <form id="signSheet" onsubmit="google.script.run
      .withSuccessHandler(updateInfo)
      .validateID(this.parentNode)">
    <input type="text" name="myID" id="myID" placeholder="Enter your student ID" autocomplete="off">
    <input type="button" value="Submit" onmouseup="google.script.run
      .withSuccessHandler(updateInfo)
      .validateID(this.parentNode)">
  </form>
  <span id="thank_you" hidden="true"></span>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<?!= include('javascript'); ?>

</body>
</html>

javascript.html 代码：

<script>
function updateInfo(ret){

        if(ret[0]){
          $( "#thank_you" ).removeClass("error");
          $( "#thank_you" ).addClass("valid");
        }
        else{
          $( "#thank_you" ).removeClass("valid");
          $( "#thank_you" ).addClass("error");
        }
        $( "#thank_you" ).text(ret[1]);
        $( "#thank_you" ).show("slow");
        $( "#signSheet" )[0].reset();
        $( "#myID" ).focus();
        console.log(ret);
      }

</script>

Code.gs 代码：

//spreadsheet key is needed to access the spreadsheet.
var itemSpreadsheetKey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';

//Open the spreadsheet and get the sheet objects
var openedSS = SpreadsheetApp.openById(itemSpreadsheetKey);
var studentList = openedSS.getSheetByName("Student List");//Spreadsheet must match with sheet name
var studentRecord = openedSS.getSheetByName("Sign In-Out Record");

function doGet() {
  var html = HtmlService.createTemplateFromFile('index').evaluate()
               .setTitle('Sign In/Out Sheet')
               .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return html;
}

function include(filename) {
  Logger.log('enter include');
  Logger.log(filename);
  var html = HtmlService.createHtmlOutputFromFile(filename).getContent();
  Logger.log(html);
  return html;
}

function validateID(form){
  var idNum = form.myID;
  var valid = false;
  var numIdList = studentList.getLastRow()-1; //-1 is to exclude header row
  //get the item array
  var idArray = studentList.getRange(2,1,numIdList,1).getValues();
  i= idArray.length;
  while(i--){
    if(idArray[i][0]==idNum & idNum!='') {
      valid=true;
      break;
    }
  }
  if(valid)
    return [1, updateRecord(idNum)];
  else return [0, "ID number " + idNum + " not recognized. Please enter a valid ID number."];
}

function updateRecord(idNum){
        studentRecord.appendRow([idNum]);
        var formulas = studentRecord.getRange("B2:D2").getFormulasR1C1();
        var lRow = studentRecord.getLastRow();
        var range = studentRecord.getRange(lRow, 2, 1, 3);
        range.setFormulas(formulas);
        var vals = range.getValues();
        var now = new Date();
        studentRecord.getRange(lRow, 5, 1, 1).setValue(now);
        now = Utilities.formatDate(now, "EST", "HH:MM a");
        idNum = "Thanks " + vals[0][0] + ", you have signed " + vals[0][2] + " at " + now;
        return idNum;
  }

更新：我找到this post并将以下代码添加到javascript.html：

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      var idVal = $("#myID").val();
      google.script.run.withSuccessHandler(updateInfo).validateID(idVal);
      return false;
    }
  });
})

这解决了我的问题，对 index.html 和 Code.gs 的部分进行了更多调整

【问题讨论】：

将您的答案发布到答案中。然后在 2 天后，将其标记为正确。这样，寻找答案的人会看到这篇文章有正确的答案。这不仅仅是为了获得答案，而是帮助人们寻找答案。
谢谢你，过去的我

标签： javascript google-apps-script submit form-submit iframe-app

【解决方案1】：

我找到了this post，并在javascript.html中添加了以下代码：

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      var idVal = $("#myID").val();
      google.script.run.withSuccessHandler(updateInfo).validateID(idVal);
      return false;
    }
  });
})

这会监听回车键并将文本字段的值发送到应用程序脚本函数。在这种情况下，我不需要使用 `event.preventDefault();'

然后我必须调整按钮的 onmouseup 函数以采用 this.parentNode.myID 并更改我的应用程序脚本函数以采用值而不是表单对象。

【讨论】：

【解决方案2】：

您必须从<form> 标记中删除onsubmit 属性：

目前你有：

<form id="signSheet" onsubmit="google.script.run
  .withSuccessHandler(updateInfo)
  .validateID(this.parentNode)">

改成这样：

<form id="signSheet">

您的按钮中已经有对 google.script.run 的呼叫，所以请留下。

【讨论】：

谢谢，在将onsubmit="google.script.run..." 转换为普通按钮后，我忘记将其取出。我认为那部分没有用，我只是出于绝望而尝试过。