將TextArea中的文本限制爲TextArea的實際區域

Question

我在TextArea詢問有關限制字符的大多數問題，我不希望這樣。我想知道如何將TextArea html元素的可編輯區域限制爲實際的textarea本身。這甚至是可能的。

例如：

說我有一個TextArea是30列4行。您可以將此區域中的文字限制爲120個字符，但這不會阻止用戶返回5次，並且已經超過了我爲其設置的給定區域。我不想要一個滾動條出現。

是否有任何JavaScript可以解決這個問題？

Answer 1

複製文成visibility: hidden分度，字體樣式等於文本區域和max-width，不會讓他走超出你的列數。如果文本隱藏副本的高度超出了限制，請刪除已添加的文本。

以下是關閉您需要什麼。不幸的是，它沒有nix第5行（在第4行輸入後），直到你輸入了一些東西，並且它可以在第5行留下幾個字符（如果你換行到第4行的第5行） 。我不確定如何進一步改進技術。

var $measure = $('#measure'); 
 
var $input = $('#input'); 
 
var $output = $('#measurement'); 
 

 
var existingText = ''; 
 
$input.on('keyup', function(event) { 
 
    $measure.html($input.val()); 
 
    $output.val($measure.width() + 'x' + $measure.height() + 'px'); 
 
    if ($measure.height() > 60) { 
 
     $input.val(existingText.trim()); 
 
     $measure.html(existingText.trim()); 
 
    } 
 
    existingText = $input.val(); 
 
});

#measure 
 
{ 
 
    position: absolute; 
 
    visibility: hidden; 
 
    height: auto; 
 
    width: auto; 
 
    white-space: pre-wrap; 
 
    
 
    /* set font style equal to style of textarea */ 
 
    font-family: monospace; 
 
    font-size: 13px; 
 
    letter-spacing: normal; 
 
    line-height: normal; 
 
    word-spacing: 0; 
 
    word-wrap: break-word; 
 
    max-width: 221px; 
 
    border: 1x solid black; 
 
    margin: 2px; 
 
    padding: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="input" cols="30" rows="4"></textarea> 
 
<div id="measure"></div> 
 
<br> 
 
<input type="text" disabled="disabled" id="measurement"/>

Answer 2

設置最大長度ATTR 120

實例鏈接在這裏

http://www.w3schools.com/tags/att_textarea_maxlength.asp