Question

你好:)我有一个带有Javascript字符计数器的HTML文本区域。当有人点击“浏览”按钮将媒体添加到他们正在编写的文本区域时，我希望剩余的字符数减少23个字符。我也在使用PHP。我该怎么做？ :)

这是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的）;

Answer 1

理想的是重写charCount以使用对象的属性来确定最大长度，例如data-maxlength =“140”（可以在jquery中使用$（obj）.data（“maxlength”）引用）

然后，您可以动态调整长度。我没有在您的代码中看到浏览按钮，因此请根据需要更新选择器。

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

Answer 2

我想你想做这样的事情。

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

如何使用onClick更改Javascript字符剩余计数器？

2 个答案: