javascript - 如何自定义文本区域以使用户能够像 MS Word 列一样书写

Question

所以我试图创建一个页面，用户可以在其中写入两列或更多列。

我希望它像一篇可编辑的报纸文章，带有一些专栏。一旦第一列填满所有 14 行，我希望它自动将多余的单词移动到另一列。

我也需要它来进行粘贴，所以我认为当行数超过 14 时我不能只传输最后一个单词。

顺便说一下，我使用这段代码来计算行数

$(window).on("change paste keyup",function(){
  var taLineHeight = 30; // This should match the line-height in the      CSS
  var taHeight = article_content.scrollHeight; // Get the scroll height of the textarea
  article_content.style.height = taHeight; // This line is optional, I included it so you can more easily count the lines in an expanded textarea
  var numberOfLines = Math.floor(taHeight/taLineHeight);
  if (numberOfLines > 14){
    //Do something
  }
});

我现在陷入困境，不知道如何继续，或者我是否走在正确的轨道上？

Answer 1

您可以使用 CSS3 和可编辑的 DIV:

#col {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}

<div id="col" contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

fiddle :https://jsfiddle.net/qy7jxd36/

关于“14行” - 您需要使用DIV高度，请参阅这个 fiddle :https://jsfiddle.net/qy7jxd36/1/