無法使用jQuery設置寬度，高度爲<textarea>

Question

我dblclick一個段落並調用一個函數來動態地用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; 
} 

它沒有發生，即使是昏暗與在.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>都不具備的width和height屬性，使用CSS來設置寬度和高度。

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

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

Answer 3

使用.css() ..instead的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