javascript - 用 jeditable 控制 textarea 的大小

Question

我的目标：允许使用 jquery 插件 jeditable 对描述进行内联编辑。

我的问题： 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 获取包装器 div 的大小，但仍然失败！

jsFiddle：jsFiddle

Answer 1

首先，您需要从 中删除height:250px;，.longtext否则 Jeditable 会将其作为<textarea>.

然后我确保它.longtext具有与将嵌套在其中的相同的样式<textarea>，例如line-height, font-size, font-family.

而且我假设您的文档中可能会有不止一个.longtext，因此您需要将 differentheights应用于 different <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

您可以尝试将 CSS 溢出属性设置为隐藏