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

Question

I'm using "script app" from google sheets and I need to allow line break in the "userform" that I have created, I will use this to feed data to my google sheet and some of the items need multiple lines in the same cell.我正在使用谷歌工作表中的“脚本应用程序”，我需要在我创建的“用户表单”中允许换行，我将使用它向我的谷歌工作表提供数据，并且某些项目需要多行细胞。 Is there anyway I can do that?反正我能做到吗？

EXAMPLE例子

EXAMPLE 2例2

CODE代码

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

The <input> tag doesn't support line breaks. <input>标签不支持换行。 If you want to add a multi-line input, you have to use <textarea> instead.如果要添加多行输入，则必须使用<textarea>代替。 So you should change all the elements which could potentially have several lines from <input> to <textarea> .因此，您应该将所有可能有几行的元素从<input>更改为<textarea> 。

That is, you should change these lines:也就是说，您应该更改这些行：

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

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

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

To these ones:对这些人：

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

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

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

This way, you can add multi-line text, which will still be a multi-line when you send it to the spreadsheet.这样，您可以添加多行文本，当您将其发送到电子表格时，该文本仍将是多行文本。

Reference:参考：

<textarea>

I hope this is of any help.我希望这有任何帮助。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-02-03 12:18:09

Reference:参考：

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-02-03 12:18:09

Reference:参考：

解决方案1
1 已采纳 2020-02-03 12:18:09