如何在用戶表單中添加換行符？

Question

我正在使用谷歌工作表中的“腳本應用程序”，我需要在我創建的“用戶表單”中允許換行，我將使用它向我的谷歌工作表提供數據，並且某些項目需要多行細胞。 反正我能做到嗎？

代碼

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>

Answer 1

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

這樣，您可以添加多行文本，當您將其發送到電子表格時，該文本仍將是多行文本。

參考：

<textarea>

我希望這有任何幫助。

如何在用戶表單中添加換行符？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-02-03 12:18:09

參考：

如何在用戶表單中添加換行符？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-02-03 12:18:09

參考：

解決方案1
1 已采納 2020-02-03 12:18:09