可以't设置宽度、高度<text区域>使用jQuery

Can't set width, height of <textarea> using jQuery

本文关键字：text lt 区域 使用 jQuery 高度 gt 设置 可以      更新时间：2023-09-26

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

$('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/

这个。。。

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"方法相互链接，只需将属性作为对象传递即可

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

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

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

使用.css()。。而不是CCD_ 3。

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

小提琴

相关文章：