无法使用 jQuery 设置 <textarea> 的宽度、高度

Question

我 dblclick 一个段落并调用一个函数以用文本区域动态替换它，以便我可以编辑段落文本。我捕获段落的宽度和高度并传递文本和尺寸。

$('article').on('dblclick','p', function(ev) { 
    var text = $(this).text();              // save the text    
    var dim = $(this).css( ["width", "height"]); 
    $(this)                             // for the p element...
        .empty()                        // wipe the p and it's text 
        .append(newTAInput(this, text, dim));       // append edited text
});

此函数创建文本区域，设置文本和尺寸，并在您在文本区域外单击时返回更改后的文本。

function newTAInput(target, text, dim) {
    var input = $('<textarea ></textarea>')
        .val(text)
        .attr(dim)
        .css('font-family', 'Times New Roman')
        .css('font-size', '16.37px')
        .bind('blur', function() {
            var value = $(this).val();
            $(target).html(value);
        });
    return input;
}

这并没有发生，即使 dim 是一个普通对象，在 .attr() 函数中具有正确的键和值。

查看 jsfiddle 中的完整代码：http://jsfiddle.net/tenrab/dYR4M/

Answer 1

这...

function newTAInput(target, text, dim) {
        console.log(dim);
        var input = $('<textarea ></textarea>')
            .val(text)
            .css({'font-family': 'Times New Roman',
                  'font-size': '16.37px',
                  'width': dim.width,
                  'height': dim.height
            })
            .bind('blur', function () {
            var value = $(this).val();
            $(target).html(value);
        });
        return input;
    }

已编辑：重构，无需将 4 个“css”方法相互链接，只需将属性作为对象传递即可

Answer 2

<textarea>s没有宽高属性，用css来设置宽高。

var input = $('<textarea ></textarea>')
    .css(dim)

http://jsfiddle.net/dYR4M/4/

Answer 3

使用.css()..而不是attr()。

function newTAInput(target, text, dim) {
console.log(dim);
var input = $('<textarea ></textarea>')
    .css(dim) //<--here
    .val(text)
    .css('font-family', 'Times New Roman')
    .css('font-size', '16.37px')
    .bind('blur', function () {
    var value = $(this).val();
    $(target).html(value);
});
return input;
}

fiddle