打字時出現JQuery textarea字符計數問題

我遇到form textarea上的字符計數功能問題。有在網絡上可用的主機解決方案，我已經遇到一個非常方便的片斷下面將輸出在頁面上指定區域左側的字符數顯示：打字時出現JQuery textarea字符計數問題

var maxLength = 1000; 
jQuery('.your-enquiry').keyup(function() { 
    var length = jQuery(this).val().length; 
    var length = maxLength-length; 
    console.log(length + "characters remaining"); 
    jQuery('#counter').text(length); 
});

你可以看到，我我正在輸出長度爲variable的控制檯窗口，以查看我的問題是什麼。看來，只要我釋放一個密鑰長度被賦值爲X，然後立即再次分配1000。

這裏是我的輸出的例子：當我檢查行我的代碼542是

995characters remaining (index):542 
1000characters remaining (index):542

：

console.log(length + "characters remaining");

爲什麼長度每一次兩次被輸出！？並有效地重置自己？我在textarea上使用了錯誤類型的事件嗎？理想情況下，我希望計數器在用戶輸入時實時更新。

一些側面信息，如果是有幫助...

我使用Contact Form 7 version 4.5.1創建表單。我HTML輸出看起來是這樣的：

<div> 
<span class="wpcf7-form-control-wrap your-enquiry"> 
<textarea name="your-enquiry" cols="40" rows="10" maxlength="1000" minlength="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required your-enquiry" aria-required="true" aria-invalid="false"></textarea></span> 
    <p id="counter">1000</p> 
    </div>

注意：只是做的研究keyUp事件快速一下，顯然它每觸發一個鍵被釋放的時間。這是有道理的，但我的價值被輸出兩次，讓我感到困惑。

來源

2016-11-15 Javacadabra

我看到VAR長度聲明兩次。錯字？ –

我使用從這裏的示例：http://geoffmuskett.com/really-simple-jquery-character-countdown-in-textarea/ - 可能更好的做法不宣佈兩次，所以我猜這是一個錯字。但是這並沒有解決這個問題。 – Javacadabra

我想知道如果這個問題是由於事實，默認情況下，'CF7'插件調用鍵入時，用戶正在鍵入？ – Javacadabra

做工精細：

// HTML 
<textarea class="your-enquiry" cols="40" rows="10" maxlength="1000" minlength="10"></textarea> 
<p id="counter">1000</p></div> 

// jQuery 
var maxLength = 1000; 
$('.your-enquiry').keyup(function() { 
    var length = jQuery(this).val().length; 
    var length = maxLength-length; 
    console.log(length + "characters remaining"); 
    jQuery('#counter').text(length); 
});

http://codepen.io/paulcredmond/pen/YpWRdY

來源

2016-11-15 12:16:31

是的，它看起來像這可能是聯繫表7插件在默認情況下調用了鍵盤功能 – Javacadabra

我傾向於將代碼剝離到基礎上來檢查是否有任何問題。 –

也許鏈接事件關閉ID或另一個類沒有鏈接到聯繫表7. –

$(document).ready(function() { 
 
    var text_max = 1000;  
 

 
    $('.your-enquiry').keyup(function() { 
 
     var text_length = $('.your-enquiry').val().length; 
 
     var text_remaining = text_max - text_length; 
 

 
     $('#textarea_feedback').html(text_remaining + ' characters remaining'); 
 
    }); 
 
});

html { margin:11px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<textarea class="your-enquiry" rows="8" cols="30" maxlength="99" ></textarea> 
 
<div id="textarea_feedback"></div>

來源

2016-11-15 12:18:13

打字時出現JQuery textarea字符計數問題

回答

相關問題