用于计算textarea中字符数的jQuery函数未按预期工作

时间:2016-02-17 04:05:36

标签: jquery

以下代码用于计算textarea中的字符数。问题是,当我按下"输入" (虽然专注于textarea),但会显示剩余的字符,但textarea限制已结束。有人可以帮我这个吗?



$(document).ready(function() {
  var text_max = 99;
  $('#textarea_feedback').html(text_max + ' characters remaining');

  $('#textarea').keyup(function() {
    var text_length = $('#textarea').val().length;
    var text_remaining = text_max - text_length;

    $('#textarea_feedback').html(text_remaining + ' characters remaining');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<p id="textarea_feedback"></p>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:1)

试试这个

此功能计数到限制,不允许再输入其他字符

它只是删除多余的字符。

function countChar(val) {
  var len = val.value.length;
  var text_max = 99;

  if (len >= text_max) {
    val.value = val.value.substring(0, text_max);
    $('#textarea_feedback').text(((text_max - len) + 1) + ' characters remaining - out of limit');
  } else {
    $('#textarea_feedback').text((text_max - len) + ' characters remaining');
  }
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="50" rows="8" id="field" onkeyup="countChar(this)"></textarea>
<div id="textarea_feedback">99 characters remaining</div>

答案 1 :(得分:0)

以下是解决方案,请尝试此fiddle

更新了javascript

$(function(){
    var text_max = 99;
  $('#textarea_feedback').html(text_max + ' characters remaining');
  $("#textarea").keyup(function(){
      var text_length = $('#textarea').val().length;
      var text_remaining = text_max - text_length;
     $('#textarea_feedback').html(text_remaining + ' characters remaining');
  });
});

<强> HTML

<span id="textarea_feedback"></span>
<textarea id="textarea"></textarea>

答案 2 :(得分:0)

这可能对你有帮助

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

function MinCharactorTextarea(textBox, e, MaxLength) {
    var tval = $(textBox).val();
    var tlength = tval.length;
    var lblMax = $(textBox).next();
    var text = tlength + " / " + MaxLength + " max";
    $(lblMax).text(text);
}
ASP文本框中的

<asp:TextBox runat="server" ID="txtTitle" TextMode="MultiLine"   MaxLength="80" onkeydown="checkTextAreaMaxLength(this,event,'80');" onkeyup="MinCharactorTextarea(this,event,80);">

0/80 max

答案 3 :(得分:0)

请尝试此解决方案,我认为这对您有所帮助

jQuery(document).ready(function($) {
  var max = 99;
  $('#textarea_feedback').html(max + ' characters remaining');
  $('textarea.max').keypress(function(e) {
    var text_remaining = max - this.value.length;
    $('#textarea_feedback').html(text_remaining + ' characters remaining');
    $("p").html("");
    if (e.which < 0x20) {
      // e.which < 0x20, then it's not a printable character
      // e.which === 0 - Not a character
      return; // Do nothing
    }
    if (this.value.length == max) {
      $("p").html("out Of Limit");
      e.preventDefault();
    } else if (this.value.length > max) {
      // Maximum exceeded     
      this.value.substring(0, max);   
    }
  });
}); //end if ready(fn)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<span id="textarea_feedback"></span>
<textarea class="max"></textarea>
<p> </p>