可編輯地控制文本區域的大小

Question

我的目標：允許使用jeditable jquery插件對描述進行內聯編輯。

我的問題： textarea輸入比原始div大，導致出現滾動條。

嘗試的解決方案：

$('.editableDescription').editable('http://jsfiddle.net/echo/jsonp/', {

id: 'data[Chantier][id]',
name: 'data[Chantier][Description]',
type: 'textarea',
height: $(".editableDescription").height() + "px",
width:  $(".editableDescription").width()+ "px",
onblur: 'submit',
tooltip: ''

});​

我試圖用jquery來考慮wrapper div的大小，但是仍然失敗！

jsFiddle： jsFiddle

Answer 1

首先，您需要刪除height:250px; 從.longtext ，否則Jeditable將其作為<textarea>的默認高度。

然后，我確保.longtext具有與將嵌套在其中的<textarea>相同的樣式，例如line-height, font-size, font-family 。

而且我假設您的文檔中可能會包含多個.longtext ，因此您需要將不同的heights應用於不同的<textarea>s 。 所以我改變了這個：

$('.editableDescription').editable('http://jsfiddle.net/echo/jsonp/',
{
        id        : 'data[Chantier][id]',
        name      : 'data[Chantier][Description]',
        type      : 'textarea',
        height:($(".editableDescription").height()) + "px",
        width: ($(".editableDescription").width()) + "px",
        onblur: 'submit',
        tooltip   : ''
});

對此：

$('.editableDescription').each(function()
{
    $(this).editable('http://jsfiddle.net/echo/jsonp/',
    {
        id:'data[Chantier][id]',
        name:'data[Chantier][Description]',
        type:'textarea',

        height:$(this).height()+'px',
        /* here it will take the height of the currently active .longtext */

        width:$(this).width()+'px',
        onblur:'submit',
        tooltip: ''
   });
});

演示

基本上就是這樣。

Answer 2

您可以嘗試將CS​​S溢出屬性設置為隱藏