将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