用於多輸入的jQuery字符計數器

我有大約8個文本輸入。它們最終都與PHP連接在一起，但爲了方便用戶使用，我將其分解爲多個「問題」。用於多輸入的jQuery字符計數器

這些字段最終被連接起來並用於有160個字符切斷的SMS環境中。我需要用jQuery計算所有8個輸入，以顯示用戶是否超過160個字符。

我可以很容易地做到這一點與任何數量的字符計數插件那裏，但他們都考慮到一個單一的textarea，沒有分解成多個輸入。

我開始建立這個使用

var current_count = parseInt($('#chars-remain span').text()); 

var regex=/^[a-zA-Z0-9\s]+$/; 
if(regex.test($(this).val())){ 
    var current_left = current_count - 1; 
} 

if (current_left <= 0) { 
    $('#chars-remain span').addClass('outOfChars'); 
} else { 
    $('#chars-remain span').removeClass('outOfChars'); 
} 
$('#chars-remain span').text(current_left);

和HTML類似

<p id="chars-remain"><span>160</span> Characters Remain</p>

但它並沒有真正發揮作用。如果你使用Delete鍵，它仍然算作總數的-1，還有一些其他的錯誤。有沒有辦法使用上面的代碼，並使其工作或有一個插件，這樣做，我找不到或者有人有更好的想法嘗試？

謝謝！

/// *編輯** \ *

我目前的jQuery是設置這樣的：

$('#form-edit-card input').live('blur keyup',function(e) { 
    $('#howto').hide(); 

    $('#in-firstName').text($('#first_name').val()).show(); 
    $('#in-lastName').text($('#last_name').val()).show(); 
    $('#in-titlePosition').text($('#job_title').val()).show(); 
    $('#in-company').text($('#company_name').val()).show(); 
    if($('#phone_number').val() != "") { $('#in-officePhone').text("o: "+$('#phone_number').val()).show(); } 
    if($('#mobile_number').val() != "") { $('#in-mobilePhone').text("m: "+$('#mobile_number').val()).show(); } 
    $('#in-emailAddress').text($('#email').val()).show(); 
    $('#in-website').text($('#website').val()).show(); 

});

這讓我，讓在領域的用戶類型，它顯示了一個例如，短信在框中的外觀如何。因此，如果我嘗試使用K4emic的答案，那麼它在很大程度上可以發揮作用，但是在Office Phone和Mobile Phone上它會自動添加'o：'和'm：'，因此我需要採集這三個額外字符的方法以及。也許在輸入寫入它們之後計算段落的字符會更有意義，這樣自動添加的字符也會被計算在內？

來源

2010-11-23 LostInQuery

爲什麼不從分配的字符中減去2x3個字符？ – K4emic 2010-11-23 20:03:06

我會的，但如果他們不填寫這些字段，因爲他們不是必需的，那麼它會減去不一定必須刪除的字符。 – LostInQuery 2010-11-23 20:52:43

這似乎是個竅門！

$('#form-edit-card input').live('blur keyup',function(e) { 
    $('#howto').hide(); 

    $('#in-firstName').text($('#first_name').val()).show(); 
    $('#in-lastName').text($('#last_name').val()).show(); 
    $('#in-titlePosition').text($('#job_title').val()).show(); 
    $('#in-company').text($('#company_name').val()).show(); 
    if($('#phone_number').val() != "") { $('#in-officePhone').text("o: "+$('#phone_number').val()).show(); } else{ $('#in-officePhone').text('');} 
    if($('#mobile_number').val() != "") { $('#in-mobilePhone').text("m: "+$('#mobile_number').val()).show(); } else{ $('#in-mobilePhone').text('');} 
    $('#in-emailAddress').text($('#email').val()).show(); 
    $('#in-website').text($('#website').val()).show(); 

    var count = 0; 
    $('p.count_me').each(function(i){ 
     count += $(this).text().length; 
    }); 
    $('#credits-remain span').text(count); 
    $('#character_count').val(count); 

    if (count > 120) { 
     $('#credits-remain span').addClass('lowChars'); 
     $('#credits-remain span').removeClass('outOfChars'); 
    } else if (count > 140) { 
     $('#credits-remain span').addClass('outOfChars'); 
     $('#credits-remain span').removeClass('lowChars'); 
    } else { 
     $('#credits-remain span').removeClass('lowChars'); 
     $('#credits-remain span').removeClass('outOfChars'); 
    } 
});

來源

2010-11-23 23:44:11 LostInQuery

我能想到的最簡單的方法是簡單地創建一個隱藏字段，並動態地將其值改爲等於來自其他八個字段的連接字符串。那麼你可以只考慮該領域的長度。

來源

2010-11-23 18:49:06 eykanal

註冊所有應限制大小的字段並重新評估每次輸入的偵聽器，似乎是最明顯的解決方案。請注意，在將輸入插入到輸入字段後觸發按鍵回調函數，而在進行更改之前觸發keydown和按鍵。

var limited = $('.limited').keyup(function(event) { 

    var length = 0; 
    var contents = ''; 

    limited.each(function(index, element) { 
     length += $(element).val().length; 
     contents += $(element).val(); 
    }); 

    console.log(length); 
    console.log($(this).val()); 
    console.log(contents); 

});

來源

2010-11-23 19:19:24 K4emic

我做了類似的事情，但以最簡單的方式，我知道如何。當總數超過149個字符，然後超過160個字符時，我也進行了總變色。

<form id="form1" method="post" action=""> 
     <input onkeydown="updateDetails();" onkeyup="updateDetails();" type="text" name="company" id="company" /> 
     <input onkeydown="updateDetails();" onkeyup="updateDetails();" type="text" name="delivery" id="delivery" /> 
</form> 
<div id="details-total">Details: 0 characters</div> 


<script type="text/javascript"> 
<!-- 

function updateDetails() { 
    var total1 = document.getElementById('company').value.length; 
    var total2 = document.getElementById('delivery').value.length; 
    var grandTotal = total1+total2; 

    if (grandTotal < 150) { 
     document.getElementById('details-total').innerHTML = '<span style="color: #20851e;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } else if (grandTotal < 161) { 
     document.getElementById('details-total').innerHTML = '<span style="color: #ff7800;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } else { 
     document.getElementById('details-total').innerHTML = '<span style="color: #fa0023; font-weight: bold;">Details: '+grandTotal+' characters (max 160)</span>'; 
    } 
} 

//--> 
</script>

來源

2012-07-26 01:02:39

用於多輸入的jQuery字符計數器

回答

相關問題