2017-02-07 35 views
0

所以我試圖創建一個頁面,用戶可以在其中寫入兩列或更多列。如何自定義textareas,使用戶能夠像MS字詞列一樣寫入

我希望它像一個可編輯的報紙文章與一些專欄。一旦第一列填滿所有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 
    } 
}); 

我被困在這一點不知道如何繼續或如果我在正確的軌道上?

+0

也許考慮延長[這個庫(http://welcome.totheinter.net/columnizer-jquery-plugin/) – haxxxton

回答

2

你可以使用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>

小提琴:https://jsfiddle.net/qy7jxd36/

關於 「14號線」 - 你需要用DIV高度發揮,看到這個小提琴:https://jsfiddle.net/qy7jxd36/1/

0

你不能拆分一個textarea分爲兩列。因此,使用divspan與兩個textarea並排或。使用Rich Text Editor,如ckeditor,它與具有許多功能的MS詞完全相似。

相關問題