Question

我想提供一个视觉效果，向用户显示当他们在响应中键入时，文本区域中剩余多少个字符。我的代码在下面工作！但我有点拼凑逻辑并且有很多重复。是否有更好的方法来编写下面的jquery，它更易于维护和简洁？

HTML

<td colspan="4" style="text-align:center;">
     NOTES<br>
     <textarea class="sam_notes maxed" maxlength="750" name="sam_notes" style="height:100px;width:90%;margin:0 auto;"></textarea>
     <br>
     <span style="font:normal 11px sans-serif;color:#B00400;">
         <span class='counter_msg'></span>
     </span>
</td>

JQUERY

(function() {
     $(document).on('focus', '.sam_notes', function(e){
      var msgSpan = $(this).parents('td').find('.counter_msg');
      var ml     = parseInt( $(this).attr('maxlength') );
      var length = $(this).val().length;
      var msg = ml - length + ' characters of ' + ml + ' characters left';

      msgSpan.empty().html(msg);
    });

    $(document).on('keyup', '.sam_notes', function(e){
      var msgSpan = $(this).parents('td').find('.counter_msg');
      var ml     = parseInt( $(this).attr('maxlength') );
      var length = $(this).val().length;
      var msg = ml - length + ' characters of ' + ml + ' characters left';

      msgSpan.empty().html(msg);
    });
})();

Answer 1

这是一种方式：

$('td').on('focus keypress', '.sam_notes', function (e) {

    var $this = $(this);
    var msgSpan = $this.parents('td').find('.counter_msg');
    var ml = parseInt($this.attr('maxlength'), 10);
    var length = this.value.length;
    var msg = ml - length + ' characters of ' + ml + ' characters left';

    msgSpan.html(msg);
});

以下是演示：http://jsfiddle.net/hungerpain/8gKs4/2/

以下是我按行顺序更改的内容：

已移除document并将其更改为td。这样事件就不会冒泡到父母身上。
将keyup更改为keypress。如果用户没有从键盘上移开他的手指，keyup将无法工作。 keypress抓取keyup和keydown。
既然你在focus和keypress中拥有相同的内容，为什么不加入呢？
您正在使用$(this)两次，因此请将其缓存以便稍后重复使用。（我知道......我知道......我在挑剔）
为parseInt添加了一个基数，这是一个JSLINT规则。基数是您添加到parseInt的额外数字。 Look at this answer for more info.
将$(this).val()更改为this.value，这更加原生。
已移除empty()。由于您已经在使用html()，因此不需要这样做。

希望这有帮助！

Answer 2

我确信你可以做出其他改进，但对我来说最明显的是：

重构更新计数逻辑以防止重复

(function() {
     $(document).on('focus', '.sam_notes', function(e){
      UpdateCount($(this));
    });

    $(document).on('keyup', '.sam_notes', function(e){
      UpdateCount($(this));
    });

    function UpdateCount(notes) {
      var msgSpan = notes.parents('td').find('.counter_msg');
      var ml     = parseInt( notes.attr('maxlength') );
      var length = notes.val().length;
      var msg = ml - length + ' characters of ' + ml + ' characters left';

      msgSpan.html(msg);
    }
})();

此外，您不需要在html（）

之前清空（）

msgSpan.empty().html(msg);与msgSpan.html(msg);

相同

Answer 3

我看了看这个： http://www.scriptiny.com/2012/09/jquery-input-textarea-limiter/ 然后将其扩展为jquery小部件是的，我知道它完全是过度设计的。我这样做是为了了解有关小部件的更多信息。但从好的方面来说，它使用起来非常简单。只需在文本区域调用小部件：

$(selector).limiter();

有一堆参数，你可以通过选项作为对象发送，例如;

 $(selector).limiter({maxChars:1000,warningChars:990});

注意，您可以在CSS中添加类样式。我假设你已经为警告文本安装了jqueryui css，以便在使用warningChars值时更改颜色。就像是 .ui-limiter-chars {position：absolute; padding-left：1em;} 可以做到这一点......

看看小提琴... http://jsfiddle.net/DE5m9/2/

$.widget("ui.limiter", {
    options:{
        limiterClass:'ui-limiter-chars ui-widget-content',
        limiterTag:'small',
        maxChars:100,
        warningClass:'ui-state-error-text',
        warningChars:90,
        wrapperClass:'ui-limiter-wrapper ui-widget',
        tagName:'TEXTAREA'
    },
    _create: function(){
        // make sure that the widget can only be called once and it is only called on textareas
        var o = this.options;
        if (($(this).attr('aria-owns') === undefined ) && (this.element[0].tagName === o.tagName)) {
            var self = this;
            var id = Math.random().toString(16).slice(2, 10).replace(/(:|\.)/g, '');
            // ids = array of id of textarea, wrapper, and limiter chars ids.
            this.ids = [(this.element.attr('id') || 'ui-limiter-' + id),'ui-limiter-wrapper-'+id,'ui-limiter-chars-'+id];
            this.element[0].id = this.ids[0];
            var limiterWrapper = $('<div/>',{
                'class':o.wrapperClass,
                'id':this.ids[1]
            });
            // semantically, this seems to be a good fit for a small tag. ie not important.
            var limiterChars = $('<'+o.limiterTag+'/>', {
                'class': o.limiterClass,
                'id': this.ids[2]
            });

            $('#'+this.ids[0]).wrap(limiterWrapper);
            $('#'+this.ids[0]).after(limiterChars);
            $('#'+this.ids[0]).attr('aria-owns',this.ids[2]);
            $('#'+this.ids[0]).on("keyup focus", function() {
                self._setCount($('#'+self.ids[0]), $('#'+self.ids[2]));
            });
            this._setCount($('#'+this.ids[0]), $('#'+this.ids[2]));
        }
    },
    _setCount:function (src, elem) {
        var o = this.options;
        var chars = src.val().length;
        if (chars > o.maxChars) {
            src.val(src.val().substr(0, o.maxChars));
            chars = o.maxChars;
        }
        $('#'+this.ids[2]).text(o.maxChars - chars );
        if (chars > o.warningChars)
        {
            $('#'+this.ids[2]).addClass(o.warningClass);
        }
        else
        {
            $('#'+this.ids[2]).removeClass(o.warningClass);
        }
    },
    destroy: function(){
        $('#'+this.ids[2]).remove();
        $('#'+this.ids[0]).unwrap();
        $('#'+this.ids[0]).removeAttr('aria-owns');
        $.Widget.prototype.destroy.call(this);
    },

});

textarea中的jquery字符倒计时

3 个答案:

重构更新计数逻辑以防止重复

此外，您不需要在html（）