Question

我有一个textarea，字数限制为最多500个。我想检查大于500的单词计数值，然后在该textarea下方显示错误消息

现在我得到了正确的字数，但是如何显示错误信息并停止输入值。

HTML

<div class="">
   <div class="form-control-wrapper">
     <textarea name="project_desc" id="project_desc" class="form-control project_desc"  rows="6"><?php if(isset($project_desc)){ echo $project_desc; }?></textarea>
   </div>
</div>

jquery的

$('#project_desc').keyup(function(e){

var value = $('#project_desc').val();
var length = value.trim().replace(/[\s]+/g, " ").split(" ").length;
if(length >= 500)
  {
    //show an error message ans stop entering values
  }
 });

Answer 1

尝试这样的事情（注意我设置最多10个单词进行测试）

$(function() {
  $('.project_desc').on("input", function(e) {
    var value = this.value;
    var maxWords = $(this).attr("data-maxwords");
    var wordString = $.trim(value.replace(/[\s]+/g, " "));
    var numWords = wordString.length==0?0:wordString.split(" ").length;
    var tooLong = numWords > maxWords;
    
    if (tooLong) {
      var trimmed = value.split(/\s+/, maxWords).join(" ");
      // Add a space at the end to keep new typing making new words
      $(this).val(trimmed + " ");
      numWords = maxWords;
    }
    $(this).next(".project_desc_message").html("<br/>"+numWords+"/"+maxWords+" words")
  }).trigger("input");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="">
  <div class="form-control-wrapper">
    <textarea name="project_desc" data-maxwords="10" id="project_desc1" class="form-control project_desc" rows="6">this field has too many words in it from the server</textarea><span class="project_desc_message"></span>
  </div>
  <hr/>
  <div class="form-control-wrapper">
    <textarea name="project_desc" data-maxwords="20" id="project_desc2" class="form-control project_desc" rows="6"></textarea><span class="project_desc_message"></span>
  </div>
</div>

这是我发现副本之前的旧版本。

$(function() {
  $('.project_desc').on("input", function(e) {
    var value = $(this).val();
    var length = $.trim(value).replace(/[\s]+/g, " ").split(" ").length;
    var maxLength = $(this).attr("data-maxwords");
    var tooLong = length >= maxLength;
    $(this).next(".project_desc_error").html("<br/>Please enter max "+maxLength+" words").toggle(tooLong);
    if (tooLong) {
      this.value = $.trim(value).replace(/[\s]+/g, " ").split(" ").slice(0, maxLength).join(" ");
    }
  }).trigger("input");
});

.project_desc_error {
  display: none; color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="">
  <div class="form-control-wrapper">
    <textarea name="project_desc" data-maxwords="10" id="project_desc1" class="form-control project_desc" rows="6">this field has too many words in it from the server</textarea><span class="project_desc_error"></span>
  </div>
  <hr/>
  <div class="form-control-wrapper">
    <textarea name="project_desc" data-maxwords="20" id="project_desc2" class="form-control project_desc" rows="6"></textarea><span class="project_desc_error"></span>
  </div>
</div>

Answer 2

当您处于错误状态时，可以使用$('#project_desc').val(value.slice(0,-1))删除最后一个类型的字符。

此$(this).after('<div class="error">this is your error.</div>')会在textarea

后添加错误消息

请注意，我缩小了以下示例中的word count。

＆＃13;

$('#project_desc').keyup(function(e) {

  var value = $('#project_desc').val();
  var length = value.trim().replace(/[\s]+/g, " ").split(" ").length;
  if (length >= 3) {
    $('#project_desc').val(value.slice(0, -1))
    if ($(".error").length == 0) {
      $(this).after('<div class="error">this is your error.</div>')
    }
  } else {
    $(".error").remove()
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
  <div class="form-control-wrapper">
    <textarea name="project_desc" id="project_desc" class="form-control project_desc" rows="6"></textarea>
  </div>
</div>

＆＃13;

Answer 3

尝试以下代码。

＆＃13;

$('#project_desc').keyup(function(e){
     var max=5;
     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) {
        e.preventDefault();
    } else if (this.value.length > max) {
        // Maximum exceeded
        this.value = this.value.substring(0, max);
    }

var value = $('#project_desc').val();
var length = value.trim().replace(/[\s]+/g, " ").length;



if(length >= 500)
  {
    $("#error").show();
  }
  else{
    $("#error").hide();
  }
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
   <div class="form-control-wrapper">
     <textarea name="project_desc" id="project_desc" class="form-control project_desc"  rows="6"></textarea>
     <span style="color:red;display:none" id="error">
      Limit Exceeded
     </span>
   </div>
</div>

＆＃13;

Answer 4

您可以使用实时计数器来显示字符数。在提交此表单时，您可以检查$result = array_reduce($array, function($final, $value) { return array_merge($final, $value); }, array());的值，如果小于0，则不允许表单提交。

＆＃13;

count

＆＃13;

maxWords = 500;

$('#count').text(maxWords);

$('#project_desc').bind('keyup keydown', function() {
  var count = $('#count');
  var valueEntered = $(this).val()
  var characters = valueEntered.trim().replace(/[\s]+/g, " ").split(" ").length;

  if (characters > maxWords) {
    count.addClass('over');
  } else {
    count.removeClass('over');
  }

  count.text(maxWords - characters);
});

＆＃13;

#projecterror {
  display: none
}

.over {
  color: red;
}

＆＃13;

Answer 5

 $("#txtPostBody").on("input", function () {
            $("#PostBodyCount").text('Count : ' + this.value.length);

            if (this.value.length > 158) {
                $("#txtPostBody").css('border-color', 'red');
            }
            else {
                $("#txtPostBody").css('border-color', '');
            }
        });

使用这个。

Answer 6

删除拆分（＆＃34;＆＃34;）：

Visual Studio 2017

Answer 7

希望这对你有用。参考取自How to prevent user to enter text in textarea after reaching max character limit

试试这个：

jQuery(document).ready(function($) {
    var max = 10;
    $('textarea#project_desc').keypress(function(e) {
        if (e.which < 0x20) {
            return;     // Do nothing
        }
        myval = $(this).val().trim().replace(/[\s]+/g, " ").split(" ").length;
        if (myval >= max) {
            e.preventDefault();
            $('.limittext').show();
        } else if (myval > max) {
            this.value = myval.substring(0, max);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
   <div class="form-control-wrapper">
     <textarea name="project_desc" id="project_desc" class="form-control project_desc"  rows="6"></textarea><span class="limittext" style="display:none;">Limit reached</span>
   </div>
</div>

Answer 8

试试这个

 $('#project_desc').keyup(function(e){

  var value = $(this).val(); // if it is not worked than try
  var value = $(this).text(); //if not work upper condition
  var length = value.trim().replace(/[\s]+/g, " ").split(" ").length;
  if(length >= 500)
  {
    alert('You cant write anymore');
    e.preventDefault();

  }
 });

如何在keyup上显示jquery错误消息

8 个答案: