文本区域最大长度检查答案

【问题标题】：Textarea maxlength check文本区域最大长度检查
【发布时间】：2022-02-07 14:26:39
【问题描述】：

文本区域验证，

如何将textarea 中的字符限制为不超过 50 个字符。

<textarea rows="5" cols="15"></textarea>

谢谢.....

【问题讨论】：

标签： jquery html javascript

【解决方案1】：

使用：

<textarea rows="5" cols="15" maxlength="50"></textarea>

来自http://sigswitch.com/2008/07/textarea-maxlength-with-jquery/：

  $(document).ready(function(){
     $('textarea[maxlength]').keyup(function(){
      var max = parseInt($(this).attr(’maxlength’));
      if($(this).val().length > max){
       $(this).val($(this).val().substr(0, $(this).attr('maxlength')));
      }

      $(this).parent().find('.charsRemaining').html('You have ' + (max - $(this).val().length) + ' characters remaining');
     });
    });

【讨论】：

感谢链接，I made a better version 这是一个 jquery 插件。

【解决方案2】：

一个 Google 离开。

<script language="javascript" type="text/javascript">
<!--
function imposeMaxLength(Object, MaxLen)
{
  return (Object.value.length <= MaxLen);
}
-->
</script>

Implementation:
<textarea name="myName" onkeypress="return imposeMaxLength(this, 50);" ></textarea>

编辑：

不冻结文本的代码：

<script type="text/javascript">

/***********************************************
* Textarea Maxlength script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function imposeMaxLength(obj) {
        const mlength = obj.getAttribute ? parseInt(obj.getAttribute("maxlength")) : ""
        if (obj.getAttribute && obj.value.length > mlength) {
            obj.value = obj.value.substring(0, mlength)
        }
        obj.value = obj.value.trim()
    }

</script>

<textarea maxlength="40" onkeyup="return imposeMaxLength(this)"></textarea>

【讨论】：

我试过了，虽然代码限制了字符但是数据被冻结了，即数据不能被编辑或删除..
我在测试和编辑时遇到了一些问题，所以你有一个</textarea>
是的。添加了一个不同的解决方案 - 考虑到它让你编写字符，然后删除它，认为它看起来不太好看。
这不会阻止用户粘贴任意数量的文本。

【解决方案3】：

更简单的内联方法：

<textarea cols="60" rows="5" onkeypress="if (this.value.length > 100) { return false; }"></textarea>

将“100”更改为您想要的任意多个字符

【讨论】：

【解决方案4】：

<asp:TextBox ID="txtColumn2" runat="server" TextMode="MultiLine" MaxLength="500" onkeyDown="checkTextAreaMaxLength(this,event,'500');"
onblur="onBlurTextCounter(this,'500');"></asp:TextBox>


function checkTextAreaMaxLength(textBox, e, maxLength) {
    if (!checkSpecialKeys(e)) {
        if (textBox.value.length > maxLength - 1) {
            if (window.event)//IE
                e.returnValue = false;
            else//Firefox
                e.preventDefault();
        }
    }
    onBlurTextCounter(textBox, maxLength);
}

function checkSpecialKeys(e) {
    if (e.keyCode != 8 && e.keyCode != 46 && e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40)
        return false;
    else
        return true;
}

function onBlurTextCounter(textBox, maxLength) {
    if (textBox.value.length > maxLength)
        textBox.value = textBox.value.substr(0, maxLength);
}

【讨论】：

【解决方案5】：

我不知道内置的 HTML 方式，但你可以使用这个：

<textarea rows="5" cols="15" onkeydown="return validateCharLimit(this);"></textarea>

function validateCharLimit(area) 
{
    var limit = 50;
    var iChars = area.value.length;
    if (iChars > limit) {
        return false;
    }
    return true;
}

【讨论】：

【解决方案6】：

<script>
function chkLen()
{
var tlen=document.getElementById('myTA').value.length;
if(tlen>50)
{
document.getElementById('myTA').value.substr(0,49)
}
}
</script>

<body>
    <textarea id="myTA" onkeyup='chkLen()'></textarea>
</body>

【讨论】：

【解决方案7】：

使用 jQuery 限制 TextArea 中的字符数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Limit Number of Characters in a TextArea</title>
    <script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
  <script type='text/javascript'>
    $(document).ready(function() {
        $('#ta').keyup(function() {
            var len = this.value.length;
            if (len >= 50) {
                this.value = this.value.substring(0, 50);
            }
            $('#charLeft').text(50 - len);
        });
    });
  </script>
</head>
<body>
<textarea id="ta" cols="15" rows="5"></textarea><br/>
  (Maximum characters: 50)<br/>
  <span id="charLeft"> </span>  Characters left
</body>

【讨论】：

【解决方案8】：

这是一个利用 HTML 5 textarea 的“maxLength”属性和 jQuery 1.7+ 的解决方案。

1.为 textarea 添加“maxLength”属性

<textarea cols="35" rows="3" maxLength="255" id="myTextArea" name="myTextArea">
</textarea>

2。为文本区域添加 jQuery 事件处理程序

$(function() {
    $('#myTextArea').on('input propertychange', function () {
        var propMaxLength = $(this).prop('maxLength');
        if (!propMaxLength || typeof propMaxLength != 'number') {
            var maxLength = $(this).attr('maxlength'), txt = $(this).val();
            if (txt.length > maxLength) {
                $(this).val(txt.substr(0, maxLength));
            }
        }
    });
});

【讨论】：