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>

但我希望它能够考虑textarea的相应值，但这是因为当您按enter时，它会将其视为2而不是1。我需要做的是将价值等同于相等数量的金额。有没有办法做到这一点，使用下面的代码。或者我是否完全需要重做它，如果是这样我不擅长jQuery或Javascript;所以我需要你的帮助??

感谢!!!

Answer 1

好的，这里有一些事情。

首先;您可以使用keyUp事件（尽管它可以使用.on('keyup', handler)变体）。因为到目前为止，你只是无休止地循环，而如果用户没有做任何事情，你不想每次检查，对吗？

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

然后我会根据需要添加/删除类。它使维护更容易。根据经验，您不希望在脚本中添加样式。这就是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();

});

请注意;截至目前，键入是有限的，和只要字符溢出，就会禁用发布按钮。这听起来很愚蠢，但您仍然可以粘贴更多允许的字符。你可以构建一个剥离额外字符的函数。但我太懒了。如果您愿意，也可以将其转换为插件。但我也太懒了;）

Answer 2

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

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

jQuery textarea计数器

2 个答案: