页面加载时的jQuery textarea字符倒计时答案

【问题标题】：jQuery textarea character countdown on page load页面加载时的jQuery textarea字符倒计时
【发布时间】：2015-05-19 17:29:47
【问题描述】：

我正在使用 jQuery 函数在文本区域字段下方为我们网站的用户生成字符倒计时（剩余 X 个字符）。我的表单有几页长（有点像向导），用户通常会在整个页面中前进和后退。当我返回一步并重新加载已完成的页面时，我的字符倒计时显示“剩余 3000 个字符”。它不计算页面加载时的字符数。如果用户返回表单，我希望触发该功能并计算已输入到 textarea 字段中的字符数。

# The jQuery Function
$(document).ready(function () {
    $('textarea').on("load propertychange keyup input paste",
    function () {
        var limit = $(this).data("limit");
        var remainingChars = limit - $(this).val().length;
        if (remainingChars <= 0) {
            $(this).val($(this).val().substring(0, limit));
        }
        $(this).closest('div').find(".countdown").text(remainingChars<=0?0:remainingChars);
    });
});

# HTML
<textarea data-limit="3000"></textarea>
<span class="countdown">3000</span> Characters Remaining

【问题讨论】：

似乎有效（如果您将 textarea 包装在 div 中），小提琴就在这里：jsfiddle.net/1jgvqna0

标签： javascript jquery html

【解决方案1】：

我认为你很接近。我对你的代码做了一些小的改动，下面给出了可行的解决方案，

$(document).ready(function () {
    $('textarea').val('some text');
    $('textarea').on("load propertychange keyup input paste",
    function () {     
        var limit = $(this).data("limit");     
        var remainingChars = limit - $(this).val().length;      
        if (remainingChars <= 0) {
            $(this).val($(this).val().substring(0, limit));
        }
        $(".countdown").text(remainingChars<=0?0:remainingChars);
    });
  
  $('textarea').trigger('load');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea data-limit="3000"></textarea>
<span class="countdown">3000</span> Characters Remaining

【讨论】：

【解决方案2】：

你可以有这样的触发器：

$('textarea').trigger('keyup');

jsfiddle

【讨论】：

【解决方案3】：

在您的文档准备功能中添加：

$('.countdown').text(
function () {
    var limit = $(this).data("limit");
    var remainingChars = limit - $(this).val().length;
    if (remainingChars <= 0) {
        $(this).val($(this).val().substring(0, limit));
    }
});

由于您正在重复内部函数，您可以考虑将其从每个 jquery 语句中取出并在内部引用它

【讨论】：

【解决方案4】：

<textarea id="comments" cols="1000"  rows="3"></textarea>
Characters Remaining : <span id="countdown">200</span> 

<script type="text/javascript">
$(document).ready(function () {
    $('#comments').on("load propertychange keyup input paste",
    function () {     
        var limit = 200;     
        var remainingChars = limit - $(this).val().length;      
        if (remainingChars <= 0) {
            $(this).val($(this).val().substring(0, limit));
        }
        $("#countdown").text(remainingChars<=0?0:remainingChars);
    });

  $('#comments').trigger('load');
});
</script>

【讨论】：