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

Question

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

$('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”方法相互链接，只需将属性作为对象传递