如何使一個textarea元素看起來像正常文本

我想創建一個HTML列表，用戶可以編輯它們出現在頁面上的項目，並使用標準鍵和成語來處理文字處理應用程序。有點像http://www.workflowy.com 如何使一個textarea元素看起來像正常文本

我已經通過給每個列表項一個textarea實現了這一點。最初，文本編輯器的樣式隱藏了它，但是如果列表項類被設置爲「編輯器」，那麼將顯示textarea並且列表文本不是。示例在http://jsfiddle.net/WWkWc/13/

如果轉到該示例，您會注意到當您單擊列表項時，它大多看起來像您期望的那樣（在此示例中，您只能通過單擊項而不是通過箭頭鍵進行導航）。唯一真正的問題是，文本框比文本行高，所以當文本框顯示列表項越來越高。我無法弄清楚如何擺脫這種影響。

乾杯

2011-12-20 Alex jg

有沒有可能用contenteditable代替？

<li contenteditable> 
    <h2>Item text</h2> 
</li>

例子：

http://html5demos.com/contenteditable

如果你不想使用內容編輯，則關鍵是要得到h2元素，並有在textarea元素完全相同的屬性。在這種情況下，我給他們相同的字體大小，字體家族和身高。我還將textarea設置爲block，因爲h2是塊級元素。最後我設置了溢出：隱藏以防止滾動箭頭。我也簡化了你的JavaScript。

http://jsfiddle.net/HM5V5/1/

h2, ul li textarea { 
    font-size: 16px; 
    font-family: arial; 
    height: 19px; 
} 

ul li textarea { 
    display: none; 
    /*border: 1px solid gray;*/ 
    outline: 1; 
    border: 0; 
    resize:none; 
    overflow: hidden; 
} 

ul li.editor textarea { 
    display: block; 
} 
ul li.editor h2{ 
    display:none; 
}

來源

2011-12-20 20:45:59 mrtsherman

這看起來相當不錯，這樣我可能會使用它，但我仍想知道如何解決這個問題與textarea的大小，主要是爲了知道這個問題該如何解決呢彈出另一種情況。 – 2011-12-20 23:40:19

@Alexjg - 好的，更新我的答案 – mrtsherman 2011-12-21 01:59:24

如果你不想推倒重來退房http://aloha-editor.org/或http://jejacks0n.github.com/mercury/它做到了這一點。兩者都是HTML5編輯器。

來源

2011-12-20 20:45:21 three

如何使一個textarea元素看起來像正常文本

回答

相關問題