2
我嘗試將我的應用腳本Web應用轉換爲使用IFRAME沙盒時遇到類似問題this post。我建議轉換爲'input ='按鈕''。使用輸入密鑰從NATIVE轉換到IFRAME沙箱提交
我的網絡應用程序是學生用於登錄和註銷學校圖書館的簡單形式。該應用程序的想法是儘可能讓學生使用它。學生應輸入他們的身份證號碼，並且能夠單擊提交按鈕或點擊輸入鍵。然後，他們的身份證在被存儲在電子表格中之前被驗證，他們會收到一條消息，表示感謝您登錄或退出，或者請輸入有效的身份證號碼。然後焦點應該返回到文本框並被清除，以便下一個學生輸入他們的ID。
我已經使用NATIVE模式如上所述工作。當我嘗試將其轉換爲IFRAME模式時，單擊此按鈕即可運行，但如果您按下回車鍵，則所有內容都會消失，並且沒有數據會顯示在電子表格中。 如何才能使用輸入鍵與點擊提交按鈕相同？
的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 & 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天后，將其標記爲正確。這樣，尋找答案的人會看到這個帖子有一個正確的答案。這不僅僅是獲得答案，而是幫助人們尋找答案。 –