javascript - 如何在php ajax中限制字符并显示剩余字符

Question

我一直在尝试实现在 php ajax cal.. 上显示剩余字符。我使用 javascript 得到了同样的结果，但无法在 ajax php cal.. 中执行此操作。任何人都可以帮助我吗？

<script type="text/javascript">
    function txtCounters(id,max_length,myelement)
    {
        counter = document.getElementById(id);
        field = document.getElementById(myelement).value;
        field_length = field.length;
        if (field_length <= max_length)  {
            //Calculate remaining characters
            remaining_characters = max_length-field_length;
            //Update the counter on the page
            counter.innerHTML = remaining_characters;
        }
    }
</script>

<label for="txtName">Enter Your Text : </label>
<input type="text" id="txtName" size="50" maxlength="50" onkeyup="javascript:txtCounters('txtCounter',50,'txtName')">
<div id="txtCounter"><b>50</b></div>characters remaining.

Answer 1

最简单的方法是使用这个方便的库:jQuery.Maxlength

<input type="text" maxlength="50"/>

<script>
$("input").maxlength();
</script>

它将自动包含生成以下内容留下的文本字符:

<input type="text" maxlength="50"/>
<div class="maxlength">50 characters left</div>

编辑

出于某种原因，您想使用 AJAX 来执行此操作。

网页端

<textarea id="textarea" name="texter"></textarea><br />

<span id="chars_remaining"></span> character(s) remaining.

$( "#textarea" ).keyup(function() {
   var text = $('#textarea').val();
   $.ajax({
      url: "url/to/PHP.php",
      type: "GET",
      data: { text: text },
      cache: false,
      success: function (resp) {
         $('#chars_remaining").html(resp);
      }
   });
});

PHP

  <?php 
  $string = $_POST['text'];
  $length = strlen($string);
  if ((50 - $length) == 0)) {
     echo 'No';
  }
  else {
      echo (50 - $length);
  }