文字数に基づいて正確な幅を設定します。

Question

次の問題があります。

私はテキストエリアに、行ごとに、文字の最大数をユーザーを制限する必要がありますが、COLSは垂直スクロールバーなどのトリックを、行っていないようです：

.textarea1 { 
 
    resize: none; 
 
    font-family: monospace; 
 
}

When no scrollbar is visible, it works fine using 50 chars. 
 
<br /> 
 
<textarea class="textarea1" cols="50" rows="3">123456789!123456789!123456789!123456789!123456789!</textarea> 
 

 
<br /> 
 
In this case, when the scrollbar is visible, at least 3 chars go to the next line. 
 
<textarea class="textarea1" cols="50" rows="3">123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!</textarea> 
 

 

 
<br /> 
 
In this case, when I use 10 chars, I can fit an extra 1 char on each line. 
 
<br /> 
 
<textarea class="textarea1" cols="10" rows="3">123456789!</textarea> 
 

 

 
<br /> 
 
In this case, scrollbar visible, 1 char go to the next line. 
 
<br /> 
 
<textarea class="textarea1" cols="10" rows="3">123456789!123456789!123456789!123456789!123456789!</textarea>

私はこの擬似コードで例示されるテキストエリアの幅を計算することを検討しました。

scrollbarWidth + textareaBorderWidth + (nChars * singleCharWidth)

しかし、無サイコロ50個の文字を使用した場合、それは小さなライン（10文字）と大きすぎると小さすぎるのです。

IE10 +のサポートが必要なので、chユニットは使用できません。 IE11でのchのサポートのほかに、もっとも言わないのは犬です。

どのようなソリューションですか？

Answer 1

これはうまくいくはずです。ただし、Chromeでのみテストされています。

function scrollbarVisible(element) { 
 
    return element.scrollHeight > element.clientHeight; 
 
} 
 

 
$.each($("textarea"), function(index, value){ 
 
    var cols = value.getAttribute("cols"); 
 
    if (cols > 0){ 
 
     if (scrollbarVisible(value)){ 
 
      cols = parseInt(cols) + 3; 
 
     } 
 
     $(value).css("width", cols + "ch"); 
 
    } 
 
})

.textarea1 { 
 
    resize: none; 
 
    padding: 0; 
 
    display: block; 
 
    line-height: 1; 
 
    resize: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
When no scrollbar is visible, it works fine using 50 chars. 
 
<br /> 
 
<textarea class="textarea1" cols="50" rows="3">123456789!123456789!123456789!123456789!123456789!</textarea> 
 
<br /> 
 
In this case, when the scrollbar is visible, at least 3 chars go to the next line. 
 
<textarea class="textarea1" cols="50" rows="3">123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!123456789!</textarea> 
 
<br /> 
 
In this case, when I use 10 chars, I can fit an extra 1 char on each line. 
 
<br /> 
 
<textarea class="textarea1" cols="10" rows="3">123456789!</textarea> 
 
<br /> 
 
In this case, scrollbar visible, 1 char go to the next line. 
 
<br /> 
 
<textarea class="textarea1" cols="10" rows="3">123456789!123456789!123456789!123456789!123456789!</textarea>