How to create a textarea with multi columns (like a newspaper?)

Question

There is a way to create a textarea that its display form is in multi columns?.

I have several fields in textarea for the user to be able to make edits, but I need these textareas to be displayed in a newspaper form, those of multi columns.

I researched ways to solve as in this example: http://www.w3schools.com/css/css3_multiple_columns.asp.

But it apparently doesn’t work with textareas, only with normal texts inserted in Divs.

Is there even such a possibility or another way to do it?

Answer 1

Look, you can make the editable div

.tres-colunas {  
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}

<div class="tres-colunas" contentEditable="true">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis efficitur libero, in facilisis libero bibendum eu. Ut pretium elit neque, eget luctus dolor porta quis. Aliquam viverra porttitor nibh, ut mattis urna euismod eget. Aliquam posuere rhoncus ligula, eu ornare risus. Vivamus imperdiet finibus metus eu porttitor. Vivamus sodales tortor ut gravida placerat. Vestibulum auctor, eros nec hendrerit vehicula, ligula felis iaculis ex, nec lobortis nisl purus nec justo. Cras venenatis nisi imperdiet massa volutpat, sed ultricies turpis venenatis.
  </p>
  <p>
    Vestibulum egestas quis mi sit amet auctor. Ut porta lacinia convallis. Donec bibendum, magna sed imperdiet lobortis, sem neque vehicula neque, at ultrices orci nulla a sem. Maecenas blandit quam ac lacinia sagittis. Sed at elit vel metus placerat mattis vel eget est. Vivamus dui justo, dapibus et feugiat in, pharetra eget lectus. Sed viverra eget odio nec elementum. Morbi molestie justo ut turpis malesuada pellentesque. Cras lobortis, ante at suscipit mollis, mi urna hendrerit nisl, id viverra elit diam nec orci. Duis eget aliquam leo, quis dignissim augue.
  </p>
  <p>
    Nulla urna quam, condimentum sed tempus ut, auctor eget tellus. Sed accumsan pulvinar dolor non ullamcorper. Aliquam accumsan ipsum eu ante laoreet eleifend. Aliquam erat volutpat. Quisque in odio elit. Sed neque odio, auctor at ligula eget, condimentum ultricies tellus. Praesent lacinia nulla ut purus lobortis pulvinar. Duis eget pretium massa, ut mollis justo. Suspendisse finibus erat felis, ac porta quam tristique id. Sed posuere semper ultricies. Morbi consequat tempor arcu, ac elementum purus congue sed. Proin sollicitudin, diam vehicula sodales dapibus, eros massa tristique magna, vitae semper massa enim nec tellus. Etiam rutrum sed nulla at egestas. Fusce rhoncus tortor a dolor vestibulum, in dapibus tellus bibendum.
  </p>
  <p>
    Etiam risus lorem, tempor et mollis in, pretium eu purus. Mauris ac iaculis augue. Integer ullamcorper dui magna, id fringilla nunc ullamcorper eu. Sed nunc ipsum, vehicula vitae metus id, commodo mollis turpis. Pellentesque eget nibh vel enim laoreet tincidunt a nec ipsum. Morbi tincidunt massa vel lacinia gravida. Sed lobortis dignissim augue nec elementum. Fusce luctus magna vitae ligula posuere convallis.
  </p>
  <p>
    Praesent mauris ante, tristique at augue id, mollis accumsan nulla. Duis vitae porttitor lorem. Nam et lorem eu mauris convallis vulputate. Aenean a ligula eget eros commodo iaculis placerat tristique mauris. In bibendum iaculis pulvinar. Sed facilisis metus non elit imperdiet, non laoreet sapien semper. Ut sapien purus, maximus at fringilla ut, malesuada ultricies nibh.
  </p>
</div>

Now to submit DIV content, you will need to include the content in the Form.

Below are two suggestions, one asynchronous and one synchronous.

Asynchronous

var frmNoticia = document.getElementById("frmNoticia");
var txtConteudo = document.getElementById("txtConteudo");
var btEnviar = document.getElementById("btEnviar");

btEnviar.addEventListener("click", function (event) {
  //adicionando o conteudo de txtConteudo ao frmNoticia.
  var frmData = new FormData(frmNoticia);  
  frmData.append("txtConteudo", txtConteudo.textContent);  
  
  //enviando formulario de forma assicrona
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open("POST", "minha URL");
  xmlHttp.onreadystatechange = function () { 
    //retorno do AJAX.
  };
  xmlHttp.send(frmData);
});

.tres-colunas {  
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}

.mimic-textarea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  padding: 2px;
  resize: both;
}

#txtConteudo {
  max-height: 100px;
  overflow: auto;
}

<form id="frmNoticia">
  <input id="hdfIdentificador" type="hidden" value="1" />
  <div>
    <label>
      Titulo:
      <input id="txtTitulo" type="Text" value="" />
    </label>
  </div>
  <div>
    <label>
      Conteudo:
      <div id="txtConteudo" class="tres-colunas mimic-textarea" contentEditable="true">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis efficitur libero, in facilisis libero bibendum eu. Ut pretium elit neque, eget luctus dolor porta quis. Aliquam viverra porttitor nibh, ut mattis urna euismod eget. Aliquam posuere rhoncus ligula, eu ornare risus. Vivamus imperdiet finibus metus eu porttitor. Vivamus sodales tortor ut gravida placerat. Vestibulum auctor, eros nec hendrerit vehicula, ligula felis iaculis ex, nec lobortis nisl purus nec justo. Cras venenatis nisi imperdiet massa volutpat, sed ultricies turpis venenatis.
        </p>
      </div>
    </label>
  </div>
  <div>
      <input id="btEnviar" type="button" value="Enviar" />
  </div>
</form>

Synchronous

In this case you only need to copy the contents of the div to a Hidden before submitting the form.

var frmNoticia = document.getElementById("frmNoticia");
var txtConteudo = document.getElementById("txtConteudo");
var hdfConteudo = document.getElementById("hdfConteudo");

frmNoticia.addEventListener("submit", function (event) {
  //copiando o valor de div#txtConteudo para o input#hdfConteudo
  //desta forma, o que será enviado é hdfConteudo.
  hdfConteudo.value = txtConteudo.textContent;
});

.tres-colunas {  
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
}

.mimic-textarea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  padding: 2px;
  resize: both;
}

#txtConteudo {
  max-height: 100px;
  overflow: auto;
}

<form id="frmNoticia">
  <input id="hdfIdentificador" type="hidden" value="1" />
  <input id="hdfConteudo" type="hidden" value="1" />
  <div>
    <label>
      Titulo:
      <input id="txtTitulo" type="Text" value="" />
    </label>
  </div>
  <div>
    <label>
      Conteudo:
      <div id="txtConteudo" class="tres-colunas mimic-textarea" contentEditable="true">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis efficitur libero, in facilisis libero bibendum eu. Ut pretium elit neque, eget luctus dolor porta quis. Aliquam viverra porttitor nibh, ut mattis urna euismod eget. Aliquam posuere rhoncus ligula, eu ornare risus. Vivamus imperdiet finibus metus eu porttitor. Vivamus sodales tortor ut gravida placerat. Vestibulum auctor, eros nec hendrerit vehicula, ligula felis iaculis ex, nec lobortis nisl purus nec justo. Cras venenatis nisi imperdiet massa volutpat, sed ultricies turpis venenatis.
        </p>
      </div>
    </label>
  </div>
  <div>
      <input id="btEnviar" type="submit" value="Enviar" />
  </div>
</form>