我有一個div作爲textarea,因爲div可以根據裏面的文本改變它的高度,這裏的問題是如果有人複製了一些樣式文本(text和html)並粘貼它,樣式會粘貼文本,contenteditable='plaintext-only'
會解決這個問題,但它似乎是一個webkit的功能。如何使contenteditable div只接受純文本?
那麼有沒有辦法讓文本只在div內?
參考:https://jsfiddle.net/w25dnuen/
我有一個div作爲textarea,因爲div可以根據裏面的文本改變它的高度,這裏的問題是如果有人複製了一些樣式文本(text和html)並粘貼它,樣式會粘貼文本,contenteditable='plaintext-only'
會解決這個問題,但它似乎是一個webkit的功能。如何使contenteditable div只接受純文本?
那麼有沒有辦法讓文本只在div內?
參考:https://jsfiddle.net/w25dnuen/
這裏將增長根據您輸入的內容的文本區域的例子:
http://jsfiddle.net/janjarfalk/r3Ekw/
的彈性文本區域運作的原因是外部的jQuery .elastic.source.js位於此處:http://jquery-elastic.googlecode.com/svn/trunk/jquery.elastic.source.js
所以現在您已經查看了這兩個資源,讓我們來討論它的功能。該腳本有一個「UDPATE」功能,基本上只是增加了空格當它到達該行結束了:
// Add an extra white space so new rows are added when you are at the end of a row.
$twin.html(textareaContent+' ');
然後在這裏你可以看到相應的功能:
// Updates the width of the twin. (solution for textareas with widths in percent)
function setTwinWidth(){
var curatedWidth = Math.floor(parseInt($textarea.width(),10));
if($twin.width() !== curatedWidth){
$twin.css({'width': curatedWidth + 'px'});
// Update height of textarea
update(true);
}
}
// Sets a given height and overflow state on the textarea
function setHeightAndOverflow(height, overflow){
var curratedHeight = Math.floor(parseInt(height,10));
if($textarea.height() !== curratedHeight){
$textarea.css({'height': curratedHeight + 'px','overflow':overflow});
}
}
這是全部在彈性功能。希望這給了一點洞察力,並幫助你。
使用textarea替代...更簡單,只接受文字 – charlietfl
令人懷疑。可以嘗試強制樣式:http://html5doctor.com/the-contenteditable-attribute/我懷疑你最好的選擇是實際使用'
@Twisty如何在輸入更多文本時允許textarea調整大小?舉個例子吧! – zakaria