2

У меня есть аналогичная проблема с this post при попытке конвертировать веб-приложение сценария приложений, чтобы использовать песочницу IFRAME. Я перешел к кнопке «input =» «, как было предложено.Преобразование из графического объекта с помощью клавиши «Добавить» в поле «IFRAME» с помощью клавиши ввода.

Мое веб-приложение - это простая форма для учащихся, которые могут использоваться для входа и выхода из школьной библиотеки. Идея приложения заключается в том, чтобы он был максимально простым для студентов. Студенты должны ввести свой идентификационный номер и иметь возможность либо нажать кнопку отправки, либо нажать клавишу ввода. Затем их идентификатор проверяется перед хранением в электронной таблице, и они получают сообщение с благодарностью за вход или выход или введите действительный идентификационный номер. Затем фокус должен вернуться в текстовое поле и быть очищен, готовый для следующего ученика ввести свой идентификатор.

У меня было это, как описано выше, с использованием режима 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 &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

+0

Ответьте на свой ответ. Затем через 2 дня отметьте его как правильно. Таким образом, люди, которые ищут ответы, увидят, что этот пост имеет правильный ответ. Речь идет не только о получении ответов, а о том, как помочь людям искать ответы. –

ответ

0

Я нашел 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 и изменить функцию сценария приложений, чтобы вместо значения объекта формы принять значение.

0

Вы должны удалить атрибут onsubmit из <form> тега:

В настоящее время у вас есть :

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

Изменить его к этому:

<form id="signSheet"> 

У вас уже есть звонок google.script.run в вашей кнопке, так что оставьте это.

+0

Спасибо, я забыл взять 'onsubmit =" google.script.run ...«' part out после преобразования его в обычную кнопку. Я не думаю, что эта часть когда-либо работала, я просто попробовал ее из отчаяния. – jembe

Смежные вопросы