CODEWITHSUNDEEP
javascriptjqueryhtml
ihsanser
ihsanser

Reputation: 176

How to customize textareas to make user able to write like MS word columns

So I am trying to create a page where user can write as two or more columns.

I want it to be like an editable newspaper article with some columns. Once the first column is filled with all 14 lines, I want it to automatically move the extra word to the other column.

I need it to work on paste too, so I think I can not just transfer the last word when the number of lines exceed 14.

By the way I am using this code for the line count 

$(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
  }
});

I am stuck at this point do not know how to proceed or if I am on the right track?

Upvotes: 0

Views: 143

Answers (2)

Sagar V
Sagar V

Reputation: 12478

You can't split a single textarea to two columns. So use a div or span with two textarea side by side or. Use a Rich Text Editor like ckeditor which is exactly similar to MS word with many features.

Upvotes: 0

Mike Scotty
Mike Scotty

Reputation: 10782

You could use CSS3 and an editable 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/

About the "14 lines" - you will need to play with the DIV height, see this fiddle: https://jsfiddle.net/qy7jxd36/1/

Upvotes: 3

Related Questions