javascript - 使用 jeditable 控制文本区域的大小

Question

我的目标:允许使用 jquery 插件 jeditable 进行描述的内联版本。

我的问题: textarea input 比原来的 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 获取包装器 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: ''
   });
});

DEMO

基本上就是这样。