在textarea自动widht和高度

时间:2015-06-01 05:12:50

标签: css textarea

我尝试了几个问题,但没有找到答案。

如何根据模式的大小设置textarea" texdtart"?



#entry{float:center;clear:both;margin-top:40px;margin-bottom:25px;margin-left:auto;margin-right:auto;}
#entry textarea{margin-left:auto;margin-right:auto;line-height:100%;text-align:left;margin-top:0px;display:block;

<div id="entry"><form><textarea class="textarea3" onclick="this.focus();this.select()" readonly="readonly" style=" width:"";height"">
_________________§§§§§§§§__________§§_____§§
_______________§§________§§_______§§§§___§§§§
_____________§§__§§§§§§§§__§§______§§_____§§
____________§§__§§______§§__§§______§§___§§
___________§§__§§___§§§__§§__§§_____§§§§§
___________§§__§§__§__§__§§__§§_____ §§§§§
___________§§__§§__§§___§§§__§§_____§§§§§
___________§§__§§___§§§§§§__§§_____§§§§§§
____________§§__§§_________§§_____§§§§§§
_______§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§
___§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§
___§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§

</textarea></form></div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

我不认为这可以通过css直接实现。你可以使用javascript或jquery来实现这一点。试试这个:

$(document).ready(function(){
    $(".textarea3").css("width", $(".textarea3:first").get(0).scrollWidth);
    $(".textarea3").css("height", $(".textarea3:first").get(0).scrollHeight+10);
});

答案 1 :(得分:0)

请检查小提琴https://jsfiddle.net/afelixj/4remtc67/

仍有待计算字符宽度的一步,以应用适当的width。现在它被硬编码为8.但它仍然有效

var ta = $("#entry textarea"),
    text = ta.val();

var lines = text.split("\n");

var count = lines.length;

var ll = 0;

for (var i=0;i<count;i++){
    if(lines[i].length > ll){
        ll = lines[i].length;
    }
}

var lh = parseInt(ta.css('line-height')),
    fs = parseInt(ta.css('font-size'));

ta.css({
    'height': count*lh,
    'width': ll*8 + 'px'
});