Как добавить разрыв строки в пользовательской форме? - PullRequest
Новая
       0

Как добавить разрыв строки в пользовательской форме?

1 голос
/ 02 февраля 2020

Я использую "приложение-скрипт" из листов Google, и мне нужно разрешить разрыв строки в созданной мной "пользовательской форме", я буду использовать ее для подачи данных на свой лист Google, а некоторым элементам нужно несколько строк в той же камере. Могу ли я это сделать в любом случае?

ПРИМЕР

ПРИМЕР 2

КОД 

function showAdicionarClienteHTML() {

  var template = HtmlService.createTemplateFromFile("AdicionarClienteHTML");

  var html = template.evaluate();
  html.setTitle("ADICIONAR CLIENTE").setHeight(800).setWidth(800);
  SpreadsheetApp.getUi().showModalDialog(html, "Adicionar novo cliente:");
  //.showModalDialog(html, "Adicionar novo cliente:");
  //.showSidebar(html);

}

function appendData(data){

  var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Clientes");
  ws.appendRow([data.name,data.login,data.sninv,data.numero,data.sndtl,data.tele,data.regiao]);

}

HTML

  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
       <!-- Compiled and minified CSS -->
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>

    <div class="container">

      <div class="row">
          <div class="input-field col s12">
            <i class="material-icons prefix">account_circle</i>
            <input id="nome" type="text" class="validate">
            <label for="nome">Nome</label>
          </div>
          <div class="input-field col s12">
          <i class="material-icons prefix">mail_outline</i>
          <input id="login" type="text" class="validate">
            <label for="login">E-Mail ou Login</label>
          </div>
          <div class="input-field col s12">
            <i class="material-icons prefix">select_all</i>
            <input id="sninv" type="text" class="validate">
            <label for="sninv">S/N do Inversor</label>
          </div>
          <div class="input-field col s12">
            <i class="material-icons prefix">format_list_numberedl</i>
            <input id="numero" type="text" class="validate">
            <label for="numero">Numero do Inversor</label>
          </div>
          <div class="input-field col s12">
            <i class="material-icons prefix">select_all</i>
            <input id="sndtl" type="text" class="validate">
            <label for="sndtl">S/N do Datalogger</label>
          </div>
          <div class="input-field col s12">
            <i class="material-icons prefix">phone_in_talk</i>
            <input id="tele" type="tel" class="validate">
            <label for="tele">Telefone</label>
          </div>
          <div class="input-field col s12">
            <i class="material-icons prefix">explore</i>
            <input id="regiao" type="text" class="validate">
            <label for="regiao">Região</label>
          </div>
      <button class="btn waves-effect waves-light" type="submit" name="action" id="btn">Adicionar
        <i class="material-icons right">send</i>
      </button>
      </div><!--END ROW -->
    </div><!--END CONTAINER -->

     <!-- Compiled and minified JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

     <script>

     var nameBox = document.getElementById("nome");
     var loginBox = document.getElementById("login");
     var sninvBox = document.getElementById("sninv");
     var numeroBox = document.getElementById("numero");
     var sndtlBox = document.getElementById("sndtl");
     var teleBox = document.getElementById("tele");
     var regiaoBox = document.getElementById("regiao");

     document.getElementById("btn").addEventListener("click",addRecord); 

     function addRecord(){

      var name = nameBox.value;
      var login = loginBox.value;
      var sninv = sninvBox.value;
      var numero = numeroBox.value;
      var sndtl = sndtlBox.value;
      var tele = teleBox.value;
      var regiao = regiaoBox.value;
      if(name.trim().length == 0 || login.trim().length == 0 || sninv.trim().length == 0 || numero.trim().length == 0 || sndtl.trim().length == 0 || tele.trim().length == 0 || regiao.trim().length == 0){
         //handle error
             M.toast({html: 'Preencha todos os campos!'})
      } else {


      var data ={
           name: nameBox.value,
           login: loginBox.value,
           sninv: sninvBox.value,
           numero: numeroBox.value,
           sndtl: sndtlBox.value,
           tele: teleBox.value,
           regiao: regiaoBox.value
     };

     google.script.run.appendData(data);
     }//CLOSE ELSE
    }//CLOSE ADD RECORD

    </script>

   </body>
  </html>

1 Ответ

1 голос
/ 03 февраля 2020

Тег <input> не поддерживает разрывы строк. Если вы хотите добавить многострочный ввод, вы должны использовать вместо него <textarea>. Таким образом, вы должны изменить все элементы, которые могут иметь несколько строк, от <input> до <textarea>.

То есть вы должны изменить эти строки:

<input id="sninv" type="text" class="validate">

<input id="numero" type="text" class="validate">

<input id="sndtl" type="text" class="validate">

На эти из них:

<textarea id="sninv" type="text" class="validate"></textarea>

<textarea id="numero" type="text" class="validate"></textarea>

<textarea id="sndtl" type="text" class="validate"></textarea>

Таким образом, вы можете добавить многострочный текст, который по-прежнему будет многострочный при отправке в электронную таблицу.

Ссылка:

Я надеюсь, что это может помочь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...