Question

我正在使用jQuery函数为我们网站的用户（X字符剩余部分）生成textarea字段下方的字符倒计时。我的表单长达几页（有点像向导），用户通常会在整个页面中前进和后退。当我返回一个步骤并重新加载已经完成的页面时，我的角色倒计时显示剩余的3000个字符＆＃39;。它不计算页面加载时的字符数。如果用户返回表单，我希望触发该函数并计算已经输入到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

Answer 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

Answer 2

你可以有一个触发器：

[id(b)==id(x) for x in l].index(True)

https://stackoverflow.com/a/17703076/901925

Answer 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语句中取出它并在里面引用它

Answer 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>

页面加载时jQuery textarea字符倒计时

4 个答案: