如何使用onClick更改Javascript字符剩餘計數器？

你好:)我有一個帶有Javascript字符計數器的HTML文本區域。當有人點擊「瀏覽」按鈕將媒體添加到正在編寫的文本區域時，我希望剩餘的字符數減少23個字符。我也使用PHP。我該怎麼做？ :)如何使用onClick更改Javascript字符剩餘計數器？

下面是HTML

<form id="form" method="post" action="" enctype="multipart/form-data"> 
     <div> 
      <label for="message2">Type your message</label> 
      <textarea ID="message2" onkeyup="textCounter(this,'counter',140);" name="status"></textarea> 
      Add Picture<input type="file" name="image" /><br /> 
      <input class="button" type="submit" value="Tweet" /><br /> 
     </div> 
    </form>

而且Jquery的

<script> 
$(document).ready(function(){ 

    $("#message2").charCount({ 
     allowed: 140,  
     warning: 10, 
     counterText: '' 
    }); 
});

而CharCount.js

(function($) { 

$.fn.charCount = function(options){ 

    // default configuration properties 
    var defaults = {  
     allowed: 140,  
     warning: 25, 
     css: 'counter', 
     counterElement: 'span', 
     cssWarning: 'warning', 
     cssExceeded: 'exceeded', 
     counterText: '' 
    }; 

    var options = $.extend(defaults, options); 

    function calculate(obj){ 
     var count = $(obj).val().length; 
     var available = options.allowed - count; 
     if(available <= options.warning && available >= 0){ 
      $(obj).next().addClass(options.cssWarning); 
     } else { 
      $(obj).next().removeClass(options.cssWarning); 
     } 
     if(available < 0){ 
      $(obj).next().addClass(options.cssExceeded); 
     } else { 
      $(obj).next().removeClass(options.cssExceeded); 
     } 
     $(obj).next().html(options.counterText + available); 
    }; 

    this.each(function() {    
     $(this).after('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>'); 
     calculate(this); 
     $(this).keyup(function(){calculate(this)}); 
     $(this).change(function(){calculate(this)}); 
    }); 

};

}）（jQuery的）;

來源

2013-10-29 K_Jack

'.charCount'不是標準的jQuery擴展。你使用什麼擴展？它是自產的還是標準的？在沒有這些信息的情況下，難以回答你的問題（沒有重寫它）。 –

ahh我的不好，從較大的頁面粘貼了代碼，並錯過了添加它，現在抱歉添加。 –

我想你想要做這樣的事情。

$(document).ready(showCounter); 
    $('#form input[type:submit]').on('click', function(){ 
     allowed - 23; 
    }, false); 

    var allowed = 140; 

    var showCounter = function(){ 
     $(".counter").remove(); 
     $("#message2").charCount({ 
      allowed: allowed,  
      warning: 10, 
      counterText: '' 
     }); 
    };

來源

2013-10-29 18:55:19

因爲charCount將偵聽器添加到對象中，所以如果多次調用它，則應該添加代碼以清除舊偵聽器。編輯：你通過外部化允許的變量來解釋:-) –

@ Brady絕對！ –

這將是理想的重寫charCount使用對象的屬性，以確定最大長度，類似的數據最大長度=「140」（可以參考使用$（OBJ）。數據（「最大長度」）在jQuery中）。

然後，您可以動態調整長度。我在代碼中看不到瀏覽按鈕，因此根據需要更新選擇器。

$("browse").click(function() { 
    $("#message2").data("maxlength", 116).change(); 
    // calling change() triggers recalc of length 
});

來源

2013-10-29 18:59:01

我同意這一點。或者，您可以編寫一個'.setAllowed（）'方法。 –

如何使用onClick更改Javascript字符剩餘計數器？

回答

相關問題