Question

我有以下代码，我有点坚持下一步做什么。这个想法是当你在文本区域输入文本时，计数器会告诉你剩下多少个字符。一旦你达到最大字符我想停止允许输入字符，或删除所有输入的字符，因此文本区域中只有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");
            }



        });

Answer 1

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

        var textlimit = 400;

        $('textarea').keyup(function() {
            var tlength = $(this).val().length;
            $(this).val($(this).val().substring(0, textlimit));
            var tlength = $(this).val().length;
            remain = textlimit - parseInt(tlength);
            $('#remain').text(remain);
         });

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

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

Answer 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/

处的工作示例

Answer 3

返回false并使用.keypress（）而不是.keyup（）在达到长度后停止输入。这是jsFiddle中的示例：

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

已更新以允许退格。

Answer 4

得到它：

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

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

Answer 5

一种简单的方法是将textarea中的文本设置为全量的子字符串。你可以在这里找到一个例子：

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

Answer 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/

Answer 7

ehm，textarea maxlength是html5中的有效属性？在ie9中不支持，那就是全部。

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

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

Answer 8

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

$('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();
    }
});

Answer 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的当前长度。

按键事件决定是否允许按键。在允许/阻止按键后，keyup事件计算字段中数据的大小。

此代码使用以下键：home，end，pagedown，pageup，backspace，delete，up，down，left和right。它不涉及从剪贴板粘贴。

希望有人发现它有用！

Answer 10

依赖keypress，keydown，keyup是一个有缺陷的解决方案，因为用户无需按任何键即可将数据复制并粘贴到textarea中。

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

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

显然，我假设你的短信分配给你的textarea。

Answer 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));
  }
});

Answer 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);
});

Answer 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);
});

Answer 14

我发现这种方法非常有效，甚至在删除它们之前甚至不会闪现textarea中的多余字符，就像其他一些解决方案那样。

<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>

Answer 15

我认为使用 maxlenght 属性+ jquery keydown，keyup，粘贴事件的最佳方式

// 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

Answer 16

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

带有jquery的textarea中的最大字符数

16 个答案:

检查http://jsfiddle.net/JCehq/1/