Question

我在TextArea上遇到的大多数问题都是关于限制字符的问题，我不希望这样。我想知道如何将TextArea html元素的可编辑区域限制为实际的textarea本身。这是否可能。

示例：

假设我有一个30列4行的TextArea。您可以将此区域中的文本限制为120个字符，但这不会阻止用户点击返回5次并且已经超过我为其设置的给定区域。我不想要一个滚动条出现。

有没有可以解决此问题的JavaScript？

Answer 1

此解决方案非常简单，对我有效：

使用“ 溢出：隐藏”和“ 调整大小：无”来设置文本区域的样式。这将隐藏滚动禁止用户调整文本区域的大小。
设置所需的文本区域的尺寸。（即，rows =“ 4” cols =“ 50”）
使用 oninput 事件将文本区域的高度与文本区域的高度进行比较。滚动。当滚动条比文本区域高时，请从滚动条中删除一个字符。输入的结尾。该循环将一直持续到滚动不再超过文本区域的高度（即没有滚动条，文本区域保持其所需的大小）。

oninput 非常强大，因为每次textarea获得用户输入时（无论是键盘事件还是复制和粘贴）都会触发。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<textarea rows="4" cols="50" style="overflow:hidden;resize:none;" oninput=" while (this.clientHeight < this.scrollHeight) {$(this).val(function(index, value){return value.substr(0, value.length - 1);})}"> </textarea>

Answer 2

将文本复制到visibility: hidden div中，其字体样式等于textarea和max-width，不会让它超出列数。如果文本隐藏副本的高度超出限制，请删除已添加的文本。

以下是关闭以满足您的需求。不幸的是，它没有在第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 3

将maxlength attr设置为120

示例链接在这里

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

将TextArea中的文本限制为TextArea的实际区域

3 个答案: