更新我的textarea上的字符限制计数

时间:2016-06-05 15:38:54

标签: javascript jquery css css3

所以我在这里创建了我的textarea:

IntBuffer

我已经编写了一个脚本来检测代码中的更改,但是它没有更新我的计数器。谁能告诉我为什么?我认为这可能是由于元素的选择。

textarea {
    min-width: 120px;
    min-height: 90px;
    padding: 8px 10px;
    background: #FFF;
    border: 1px solid #E0E0E0;
    border-radius: 2px;
    outline: none;
    padding: 8px 10px;
    box-shadow: inset 0 1px 2px rgba(#E0E0E0, .50), 0 -1px 1px #FFF, 0 1px 0 #FFF;

    @include transition(all .2s ease-in-out);

    @include placeholder {
        font-family: 'Titillium Web', sans-serif;
    }
}
textarea:focus {
    border: 1px solid lighten(#3498db, 10);

    @include box-shadow(0px, 0px, 6px, rgba(lighten(#3498db, 10), .5), false);
}
.textarea-group {
    position: absolute;
    min-width: 120px;
    min-height: 90px;

    textarea[limit] {
        display: block;
        resize: none;
        border-bottom: none;
        border-bottom-left-radius: 0; border-bottom-right-radius: 0;
        margin: 0;
        position: relative;
        width: 100%;
    }
    .chars {
        display: block;
        margin: 0;
        position: relative;
        width: 100%;
        padding: 8px 10px;
        background: #FAFAFA;
        color: #999;
        font-size: 11px;
        border: 1px solid #E0E0E0;
        border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;
    }
}

该脚本肯定会被调用。

N.B。我希望将其应用于具有相同名称的所有元素:)

谢谢!

编辑 jquery的最终代码如下所示:

$(function() {
    $('.textarea-group > textarea[limit]').keyup(function() {
        var max = $(this).attr('limit');
        var length = $(this).val().length;
        length = max - length;
        $(this + ' > .chars span').text(length);
    });
});

致旧金山(答案)和Akshay(整数解析)

1 个答案:

答案 0 :(得分:1)

this不是字符串,所以这应该失败:

$(this + ' > .chars span')

在adition中,this应该是gextarea,所以首先你必须在DOM上升一级。

相反,请尝试使用second parameter context

$('.chars span', this.parentNode)

或使用parentfind

$(this).parent().find('.chars span')