使用可变fontSize在textArea中对正

Justification in textArea with variable fontSize

本文关键字：textArea fontSize      更新时间：2023-12-21

我有一个可编辑的文本区域。当我们在textArea中输入文本时，文本的字体大小会随着文本长度的变化而变化。文本长度越大，font-size越小。这导致了对正问题，有没有任何方法可以在文本区域内对正文本。

这是JavaScript代码：

var textie = document.getElementById('new1');
var spanny = document.getElementById('length');
var textLength;
textie.addEventListener('keypress',function(e){
var size;
textLength = textie.value.length;  
size = Change(textLength);
this.style.fontSize = size;
},false);
function Change(fontLength) 
{
var fontSize;
if(fontLength>=1 && fontLength<=4)
{
    fontSize = 35+"px";
}
else if(fontLength>=5 && fontLength<=12)
{
    fontSize = 30+"px";
}
else if(fontLength>=13 && fontLength<=35)
{
    fontSize = 20+"px";
}
else if(fontLength>=36 && fontLength<=50)
{
    fontSize = 18+"px";
}
else if(fontLength>=51 && fontLength<=150)
{
    fontSize = 16+"px";
}
else if(fontLength>150)
{
    fontSize = 15+"px";
}
return fontSize;
}

这是HTML

<textArea class = "new" id = "new1"></textArea>
<span id = "length"></span>

我附上了一个jsfiddle，试着在其中添加（大量）随机文本，你就会理解

谢谢！

您的脚本没有任何问题。实际上，主要浏览器不支持TextArea文本对齐。

相关文章：