使用 jquery 的 textarea 中的最大字符数

Posted 2023-05-07

【中文标题】使用 jquery 的 textarea 中的最大字符数

【英文标题】：Max characters in textarea with jquery

【发布时间】：2011-07-14 14:46:46

【问题描述】：

我有以下代码，但我有点不知道下一步该做什么。这个想法是当您在文本区域中输入文本时，计数器会告诉您还剩多少字符。一旦达到最大字符数，我想停止允许输入字符，或者删除所有输入的字符，以便文本区域中只有 10 个字符。我知道我必须将代码放在上面写着 alert("LONG"); 的位置，但我不太确定是什么。

var maxLen = 10;
        console.log("Start");
        $('#send-txt').keyup(function()
            var Length = $("#send-txt").val().length;
            var AmountLeft = maxLen - Length;
            $('#txt-length-left').html(AmountLeft);
            if(Length >= maxLen)
                alert("LONG");
            



        );

【问题讨论】：

如果文本很小，只需使用输入文本和它的 maxlength 属性。如果文本很长，我认为这不是最好的解决方案，因为如果我复制/粘贴的文本长于最大值，它将被静默截断。不仅如此，我无法选择要删除的部分。您必须向用户反馈出现问题。

【参考方案1】：

所有这些答案都有些奇怪，因为他们试图做的太多了。一种更简单且视觉上更令人愉悦的方式（因为它显示文本很快被截断） - 并且比前面的示例更奇怪（注意它如何覆盖最后一个键？） - 是简单地截断 keyUp 上的字符数到允许的数量。

var maxchars = 400;

$('body').on('keyup paste', 'textarea', function () 
    $(this).val($(this).val().substring(0, maxchars));
    var tlength = $(this).val().length;
    remain = maxchars - parseInt(tlength);
    $('#remain').text(remain);
);

请注意，这也适用于粘贴文本，因为上面的某些示例不适用。

此处示例：http://jsfiddle.net/PzESw/5/

【讨论】：

我写了一个版本，它在使用右键单击 > 粘贴时考虑了“粘贴”事件，因为这不会触发 keyup - jsfiddle.net/JCehq/1313。这并不完美，因为当使用右键单击 > 粘贴时计数已关闭，因为 .val() 仍然是先前的值。如果我想解决最后一个错误，我会在这里发布。在相关说明中，我在查看此问题之前尝试过的一些插件存在我提到的后一个问题，例如ndpsoftware.com/show_char_limit.php

这是最准确的答案，干得好。但是，如果您想要 400 个字符的限制，请确保将 var textlimit = 400; 设置在函数上方。此外，remain = parseInt(tlength); 行应该是 remain = textlimit - parseInt(tlength);，而不是如果您想显示超出限制的剩余部分。

与公认的答案不同，这更优雅，并且会截断粘贴的文本。

【参考方案2】：

来了。超出字符限制的任何内容都将被删除。

$('textarea').keypress(function(e) 
    var tval = $('textarea').val(),
        tlength = tval.length,
        set = 10,
        remain = parseInt(set - tlength);
    $('p').text(remain);
    if (remain <= 0 && e.which !== 0 && e.charCode !== 0) 
        $('textarea').val((tval).substring(0, tlength - 1));
        return false;
    
)

在http://jsfiddle.net/JCehq/1/查看工作示例

【讨论】：

喜欢这个解决方案，但是当你在最后一个位置并向后移动时，它会切断最后一个字符

@steve 我更新了答案。为了防止这种情况发生，我们需要添加&& e.which !== 0 && e.charCode !== 0

复制粘贴还是有问题。您可以将任何内容粘贴到 textarea。

有人找到复制到文本区域的解决方案吗？

这不是一个完整的解决方案。

【参考方案3】：

一旦达到长度，返回 false 并使用 .keypress() 代替 .keyup() 会停止输入。这是 jsFiddle 中的示例：

http://jsfiddle.net/p43BH/1/

更新为允许退格。

【讨论】：

问题是一旦达到限制就不能回去更新了。

是的，忘记了。您需要使用 event 参数来 keypress() 并检查退格。我已经更新了小提琴。

您无法使用箭头键返回。 return false; 或 preventDefault 不是一个好的解决方案。

【参考方案4】：

明白了：

$("#div_id").prop('maxlength', '80');

我真的不知道这个解决方案是否有问题，但它对我有用。

【讨论】：

让我免于编写无用的脚本

这可行，但它仍然成为迄今为止其他解决方案所存在的右键单击粘贴问题的受害者。

【参考方案5】：

一个简单的方法是将文本区域中的文本设置为完整数量的子字符串。你可以在这里找到一个例子：

http://www.mediacollege.com/internet/javascript/form/limit-characters.html

【参考方案6】：

如果你改变你的 js 看起来像这样，它应该适合你：

var $txtLenLeft = $('#txt-length-left'); // lets cache this since it isn't changing
$('#send-txt').keydown(function(e)  //take the event argument
   var Length = $(this).val().length; // lets use 'this' instead of looking up the element in the DOM
   var AmountLeft = maxLen - Length;
   $txtLenLeft.html(AmountLeft);
   if(Length >= maxLen && e.keyCode != 8) // allow backspace
      e.preventDefault(); // cancel the default action of the event
   
);

您可以在此处查看一个工作示例：http://jsfiddle.net/aP5sK/2/

【讨论】：

谢谢，但问题是你不能按退格键或任何东西来改变你写的内容

@Phil：答案和示例已更改为允许退格 :)

如果你使用 preventDefault 你不能使用箭头键返回。

【参考方案7】：

ehm，textarea maxlength 是 html5 中的有效属性吗？ ie9不支持，仅此而已。

w3nerds http://www.w3.org/TR/html-markup/textarea.html#textarea.attrs.maxlength

w3傻瓜http://www.w3schools.com/tags/att_textarea_maxlength.asp

【参考方案8】：

这是一个使用 HTML5 数据属性自动绑定到所有需要的文本区域的解决方案：

$('textarea[data-max-length]').live('keypress', function(e) 
    if (String.fromCharCode(e.charCode || e.keyCode).match(/\S/) && $(this).val().length >= $(this).attr('data-max-length')) 
        e.preventDefault();
    
);

【参考方案9】：

我知道这有点晚了，但我也必须弄清楚这一点。我必须让它与 UTF8 字节长度一起工作，并允许某些按键。这是我想出的：

checkContent = function (event) 

    var allowedKeys = [8,46,35,36,37,38,39,40];
    var contentLength = lengthInUtf8Bytes(jQuery(event.currentTarget).val());
    var charLength = lengthInUtf8Bytes(String.fromCharCode(event.charCode));

    if (charLength + contentLength > 20) 

        if(jQuery.inArray(event.keyCode, allowedKeys) == -1) 
            event.preventDefault();
         
    


countLength = function(event) 

    var len = lengthInUtf8Bytes(jQuery(event.currentTarget).val());
    jQuery('#length').html(len);



lengthInUtf8Bytes = function(str) 
    var m = encodeURIComponent(str).match(/%[89ABab]/g);
    return str.length + (m ? m.length : 0);


jQuery(function()jQuery("#textarea").keypress(function(event)checkContent(event)).keyup(function(event)countLength(event)));

你需要一个 id 为 #textarea 的 textarea 和一个显示当前长度的元素，id 为 #length。

keypress 事件决定是否允许按键。 keyup 事件统计允许/禁止按键后字段中数据的大小。

此代码适用于以下键：home、end、pagedown、pageup、backspace、delete、up、down、left 和 right。它不处理从剪贴板粘贴。

希望有人觉得它有用！

【讨论】：

忘了说，这个例子中的最大长度是20，你可以在if语句中看到。

【参考方案10】：

依赖 keypress、keydown、keyup 是一个有缺陷的解决方案，因为用户可以在不按任何键的情况下将数据复制并粘贴到 textarea 中。

要使用 javascript 限制 textarea 中的文本长度，无论数据如何进入，您必须改用 setInterval 计时器。

setInterval(function() 
if ($('#message').val().length > 250) 
    $('#message').val($('#message').val().substring(0, 250));
, 500);

显然，我假设您有一个消息 id 分配给您的 textarea。

【参考方案11】：

试试这个。

var charLmt = "200";//max charterer 
 $("#send-txt").keydown(function()
   var _msgLenght = $(this).val().length;
   if (_msgLenght > charLmt) 
   $(this).val($(this).val().substring(0, charLmt));
  
);

【参考方案12】：

$("#message-field").on("keyup paste", function() 
  var $this, limit, val;
  limit = 140;
  $this = $(this);
  val = $this.val();
  $this.val(val.substring(0, limit));
  return $('#character-remaining').text(limit - $this.val().length);
);

【参考方案13】：

试试这个。甚至适用于从键盘复制粘贴：

$("#comments").unbind('keyup').keyup(function(e)
    var val = $(this).val();
    var maxLength = 1000;
    $('#comments').val((val).substring(0, maxLength));
    $("#comments_length").text($("#comments").val().length);
);

【参考方案14】：

我发现这非常有效，甚至不会像其他一些解决方案那样在删除文本区域之前将多余的字符闪烁。

<h1>Add a comment:</h1>
<form>
    <textarea name="commentText" id="commentText"></textarea>
</form>
<br><span id="commentChars">1000</span> characters remaining

<script type="text/javascript">

    function checkChars()
        var numChars = $('#commentText').val().length;
        var maxChars = 1000;
        var remChars = maxChars - numChars;
        if (remChars < 0) 
            $('#commentText').val($('#commentText').val().substring(0, maxChars));
                remChars = 0;
            
        $('#commentChars').text(remChars);
    

    $('#commentText').bind('input propertychange', function()
        checkChars();
    );

    checkChars();

</script>

【参考方案15】：

我认为最好的方法是使用 ma​​xlenght 属性 + jquery keydown、keyup、paste 事件

// text input maximum lenght
$(document).on('keydown keyup paste', 'input[type=text]', function(e) 
  var textArea = $('input[type=text]').val(),
    textLenght = textArea.length,
    limit = $('textarea').attr('maxlength'),
    remain = 'left ' + parseInt(limit - textLenght) + ' chars';
  $('#remain-title').text(remain);
  if (textLenght > 500) 
    $('textarea').val((textArea).substring(0, limit))
  
);

// tex area maximum lenght
$(document).on('keydown keyup paste', 'textarea', function(e) 
  var textArea = $('textarea').val(),
    textLenght = textArea.length,
    limit = $('textarea').attr('maxlength'),
    remain = 'left ' + parseInt(limit - textLenght) + ' chars';
  $('#remain-description').text(remain);
  if (textLenght > 500) 
    $('textarea').val((textArea).substring(0, limit))
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Title</label>
  <p id="remain-title"></p>
  <input type="text" placeholder="Enter Title" maxlength="500"/>
</div>
<br>
<hr>
<br>
<div>
  <label>Description</label>
  <p id="remain-description"></p>
  <textarea placeholder="Enter custom description" rows="4" maxlength="500"></textarea>
</div>

见JSFiddle

【参考方案16】：

在 2020 年，大多数浏览器限制 textarea 中的字符由一个有用的属性 maxlength 支持 check at w3chools