Question

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

如何根据模式的大小设置textarea＆＃34; texdtart＆＃34;？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

Answer 2

请检查小提琴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'
});

在textarea自动widht和高度

2 个答案: