對於多個輸入副本，jquery輸入更新（帶有剩餘字符）

我在更新文本字段（字符數）方面存在一些問題。下面是代碼對於多個輸入副本，jquery輸入更新（帶有剩餘字符）

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(); 
     }); 
});

的主要問題是，我有類「.account編輯場」不止一個輸入。這裏有個奇怪的事情開始，如果我將編輯第一個輸入 - 一切正常。如果我將在第一個輸入中留下一些文本 - 其他所有文本將顯示來自第一個輸入的剩餘字符，並且不會在當前輸入中顯示剩餘字符（除第一個之外）。我如何才能將代碼更改爲僅用於當前輸入，而不是用於頁面上的每個輸入？下面是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>

來源

2014-04-04 Dazvolt

使用這樣

 $('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); 
    });

如果你想restring與長度的輸入，您可以在輸入字段中使用maxlength財產

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

來源

2014-04-04 08:40:00

工作得很好，謝謝你（我會接受在7分鐘內你的答案）。 – Dazvolt

的問題是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

來源

2014-04-04 08:48:43 martynas

對於多個輸入副本，jquery輸入更新（帶有剩餘字符）

回答

相關問題