Question

我在更新文本字段（字符数）方面遇到了一些问题。这是代码

function updateCountdowt() {
            var remainingt = 30 - jQuery('.account-edit-field').val().length;
            jQuery('.input-text-count').text(remainingt);
}

$(document).ready(function(){   
        updateCountdowt();
        $('input.account-edit-field').on('keyup', function() {
            updateCountdowt();
        });
        $('input.account-edit-field').on('change', function() {
            updateCountdowt();
        });
});

主要问题是我有一个以上的输入和＃34; .account-edit-field＆＃34;。这是奇怪的事情开始，如果我将编辑第一个输入 - 一切正常。如果我在第一个输入中留下一些文本 - 所有其他文本将显示第一个输入中的剩余字符，并且不会在当前输入中显示剩余字符（除了第一个）。我怎样才能更改代码以仅用于当前输入，而不是用于页面上的每个输入？这是HTML结构：

<div class="account-edit-group">    
                    <input type="text" value="" class="account-edit-field">
                    <span class="input-text-count"></span>
                    <div>
                        <button class="account-edit-field-save"> </button><button class="account-edit-field-cancel"> </button>
                    </div>                                  
                    <div class="account-edit-field-warning"><span class="w-text"></span></div>
</div>

Answer 1

像这样使用

     $('input.account-edit-field').on('keyup', function() {
        $(this).next('.input-text-count').text(30-$(this).val().length);
    });
    $('input.account-edit-field').on('change', function() {
         $(this).next('.input-text-count').text(30-$(this).val().length);
    });

如果要使用长度重新绑定输入，可以在输入字段中使用maxlength属性

<input type="text" value="" maxlength="30" class="account-edit-field">

Answer 2

问题是updateCountdown不知道您指的是哪个输入字段。只需更新.on（）函数内的值，并使用$（this）来引用当前元素。

<强> HTML：

<div class="account-edit-group">    
                    <input type="text" class="account-edit-field">
                    <span class="input-text-count">30</span>
                    <input type="text" class="account-edit-field">
                    <span class="input-text-count">30</span>
                    <input type="text" class="account-edit-field">
                    <span class="input-text-count">30</span>                                                        
</div>

<强> jQuery的：

$(document).ready(function(){   
        $('.account-edit-group').on('keyup', "input", function() {
            var remaining = 30 - $(this).val().length;
            $(this).next().text(remaining);
        });
});

<强> DEMO

Jquery输入更新（包含剩余字符）用于多个输入副本

2 个答案: