0

你好 :) 我有一个带有 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);

4

2 回答 2

1

最好重写 charCount 以使用对象的属性来确定最大长度，例如 data-maxlength="140" （可以在 jquery 中使用 $(obj).data("maxlength") 进行引用）。

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

$("browse").click(function() {
    $("#message2").data("maxlength", 116).change();
    // calling change() triggers recalc of length
});
于 2013-10-29T18:59:01.517 回答
0

我想你想做这样的事情。

   $(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-29T18:55:19.390 回答