HTML TextArea行数を制限する

Question

ユーザーが最大255桁と5行のテキストを入力できるテキストエリアが必要です。その後、 "投稿"ボタンをクリックすると、テキストは別のPHPファイルに送信されます。 テキストは2番目のphpファイルに送信され、255桁の制限が機能します（maxlength = "255"）が、行の制限を取得できません。私はそれをgoogled、フォーラムを検索し、複数のものを試してみましたが、何も動作しません。 これは私が試したことの一つです。

<script> 
$(document).ready(function() { 
$('textarea[name=message]').on('keypress', function (event) { 
var textarea = $(this), 
    numberOfLines = (textarea.val().match(/\n/g) || []).length + 1, 
    maxRows = 5; 

if (event.which === 13 && numberOfLines === maxRows) { 
    return false; 
} 
}); 
}); 
</script> 
<textarea name="message" placeholder="What's on your mind?" maxlength="255" data-limit-rows=true></textarea> 

<input type="submit" value="Post"> 
</form> 

おかげ

Answer 1

は、容器内のテキストの行の数は、その容器の寸法に通常依存しています。したがって、最初にテキストエリア内のテキストに関する情報が必要になります。

テキスト領域内の1行の高さを1文字と見なすことができます。もちろんこれは、テキストエリアの文字のfont-sizeとfont-familyにも依存しています。これらのディメンションを取得すると、テキストエリアに入力された行の数を確認できます。残念ながら、これらの数値を確認するには、テキスト領域と同じ幅のdivを使用して、一部を複製する必要があります。

var textarea = document.getElementById('userinput'); 
 
var button = document.getElementById('checklines'); 
 

 
button.onclick = function(){ 
 
    var temp = document.createElement('div'); 
 
    temp.style.width = textarea.clientWidth + 'px'; 
 
    var style = window.getComputedStyle(textarea) 
 
    temp.style.fontFamily = style.getPropertyValue("font-family"); 
 
    temp.style.fontSize = style.getPropertyValue("font-size"); 
 
    temp.textContent = 'X'; 
 
    document.body.appendChild(temp); 
 
    var unit = temp.clientHeight; // height of one line 
 
    temp.textContent = textarea.value; 
 
    var lines = temp.clientHeight/unit; 
 
    console.log(lines); 
 
    temp.outerHTML = ''; 
 
}

<textarea id="userinput"></textarea> 
 
<button id="checklines">Check Lines</button>