如何在用户表单中添加换行符？

105

加布里埃尔·洛舍特（Gabriel Lorscheiter）

我正在使用Google表格中的“脚本应用”，并且需要在创建的“用户窗体”中使用换行符，将其用于将数据输入到我的Google表格中，并且某些项目需要在同一行中包含多行细胞。反正我能做到吗？

码

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>

该<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>

这样，您可以添加多行文本，当您将其发送到电子表格时，该文本仍然是多行的。