jQuery 文本区域计数器

Question

我有这个jQuery代码

$(window).load(function () {
    $('document').ready(function () {
        var text_max = "5000";
        $('#ram').html(text_max + '/5000');

        window.setInterval(function () {
            $("#post").attr("maxlength", "5000");
            var text_length = $('#post').val().length;
            var text_remaining = text_max - text_length;
            if ($("#post").val().length < 4750) {
                $('#ram').html('<abbr title="You Have ' + text_remaining + ' Characters Remaining In This Post" style="visibility: hidden;">' + text_remaining + '/5000</abbr>');
            } else {
                $('#ram').html('<abbr title="You Have ' + text_remaining + ' Characters Remaining In This Post">' + text_remaining + '/5000</abbr>');
            }
            if ($("#post").val().length <= 5000) {
                $("#subm").removeAttr("disabled");
            } else {
                $("#subm").attr("disabled", "disabled");
            }
            if ($("#post").val().length < 4980) {
                $("#ram").removeAttr("style");
            } else {
                $("#ram").attr("style", "color:#ff0000;");
            }
        });
    });
});

还有我的HTML：

<form action='posting' method='POST'><center><font color='#ff0000' style='style=font-family: Sarala, sans-serif;display: inline-block;word-break: break-word;'></font><br><table><tr><td><textarea rows='15' cols='40' style='resize: none;max-width: 297px;max-height: 225px;width: 297px;height: 225px;' name='post' id='post' maxlength='5000' spellcheck='true' autofocus></textarea></center></td></tr><tr><td><div class='ram' id='ram' name='ram'><noscript><center>There Is A 500 Character Limit On All Posts</center></noscript></div></td></tr></table></td></tr><tr><td><center><input type='submit' value='Post&#33;' class='subm' id='subm' name='subm'></center></td></tr></table></form>

但是我希望它计算文本区域的适当值，但这是因为当您按 enter 时它会将其计算为 2 而不是 1。我需要做的是使价值相等，而不是不相等。有没有办法做到这一点，用下面的代码。或者我是否完全需要重做，如果是这样我不擅长 jQuery 或 Javascript；所以我需要你的帮助??

谢谢！！！

Answer 1

我很好奇，因为在我的电脑上我无法重复你的问题。你能测试我的代码片段吗？

$(function () {
  var text_max = 5000;
  $("#post").attr("maxlength", text_max);
  $('#ram').html('<abbr title="You Have ' + text_max + ' Characters Remaining In This Post">' + text_max + '/5000</abbr>');

  $('#post').on('keyup', function () {
    var text_length = $('#post').val().length;
    var text_remaining = text_max - text_length;
    $('#ram').html('<abbr title="You Have ' + text_remaining + ' Characters Remaining In This Post">' + text_remaining + '/5000</abbr>');
    if ($("#post").val().length < 5000) {
      $("#subm").removeAttr("disabled");
    } else {
      $("#subm").attr("disabled", "disabled");
    }
    if ($("#post").val().length < 4980) {
      $("#ram").removeAttr("style");
    } else {
      $("#ram").attr("style", "color:#ff0000;");
    }
  });
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<form action='posting' method='POST'>
    <center><font color='#ff0000'
                  style='style=font-family: Sarala, sans-serif;display: inline-block;word-break: break-word;'></font><br>
        <table>
            <tr>
                <td><textarea rows='15' cols='40'
                              style='resize: none;max-width: 297px;max-height: 225px;width: 297px;height: 225px;'
                              name='post' id='post' maxlength='5000' spellcheck='true' autofocus></textarea>
    </center>
    </td></tr>
    <tr>
        <td>
            <div class='ram' id='ram' name='ram'>
                <noscript>
                    <center>There Is A 500 Character Limit On All Posts</center>
                </noscript>
            </div>
        </td>
    </tr>
    </table></td></tr>
    <tr>
        <td>
            <center><input type='submit' value='Post&#33;' class='subm' id='subm' name='subm'></center>
        </td>
    </tr>
    </table>
</form>

Answer 2

好的，这里有几件事。

首先；您可以使用 keyUp event (although it's beter to use the .on('keyup', handler) 变体）。因为现在你只是在无休止地循环，而你不想每次都检查用户是否没有做任何事情，对吧？

此外； jQuery(document).ready(); 回调就足够了，您不需要将其包装在 jQuery(window).load() 回调中。

那我就add/remove类酌情吧。它使维护变得容易得多。根据经验，您不想在脚本中添加样式。这就是 css 的目的。

我认为这个小脚本可以满足您的需求。在此处查看 demo。

jQuery(document).ready(function ($) {

    // Calculate remaining characters
    function charactersRemaining() {
        var charactersAllowed = $('input[name="characters-allowed"]').val();
        return {
            allowed: charactersAllowed,
            remaining: charactersAllowed - $('textarea[name="post"]').val().length
        };
    };

    // Do stuff when calculated the characters
    function updateCharacterCount() {

    var characterCount = charactersRemaining();

    // Update notifiers
    $('.characters-remaining').text(characterCount.remaining);
    $('.allowed-characters').text(characterCount.allowed);

    // Update properties and classes
    if( characterCount.remaining < 0 ) {
        $('button.submit').prop('disabled', true);
    } else {
        $('button.submit').prop('disabled', false);
    }

    if( characterCount.remaining <= 0 ) {
        $('.character-count').addClass('overflow');
      $('textarea[name="post"]').addClass('limit');
    } else {
        $('.character-count').removeClass('overflow');
      $('textarea[name="post"]').removeClass('limit');
    }
  };

  // Register events for form fields
  $('textarea[name="post"], input[name="characters-allowed"]').on('keyup', function() {
    updateCharacterCount();
  });

  // As a little extra disallow typing of extra characters
  $('body').on('keydown', 'textarea[name="post"].limit', function(e) {
    var keyCode = e.keyCode || e.which;

    if( keyCode !== 8 && keyCode !== 46 ) { // allow backspace and delete button
        e.preventDefault();
    }

  });

  // initialize
  updateCharacterCount();

});

请注意；截至目前，输入受到限制，和只要字符溢出，post 按钮就会被禁用。这听起来很愚蠢，但您仍然可以粘贴更多允许的字符。您可以构建一个去除多余字符的函数。但我太懒了。如果您愿意，也可以将其转换为插件。但我也太懒了;)

jQuery 文本区域计数器

jQuery textarea counter

javascript

jquery

counter