Question

我dbclick一个段落并调用一个函数来动态地用textarea替换它，这样我就可以编辑段落文本了。我捕获段落的宽度和高度，并传递文本和尺寸。

$('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
});

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

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

<textarea>没有宽度和高度属性，请使用css设置宽度和高度。

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

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

Answer 2

此...

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 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

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

3 个答案: