Question

我使用下面的jquery将输入的长度限制为110个字符。补充，它显示输入的字符数，但我想显示剩余的字符数。有帮助吗？此外，我将很感激有关如何改进此代码的任何建议。

jQuery(document).ready(function(){
    jQuery("#post_title").prev("label").children(".adverts-form-required").after("<span class=\"title-counter\">(<input type=\"text\" value=\"0\" maxlength=\"3\" size=\"3\" id=\"title_counter\" readonly=\"\" style=\"background:#fff;\">)</span>");
    jQuery("#post_title").keyup( function() {
        jQuery("#title_counter").val(jQuery("#post_title").val().length);
    });
    jQuery(".adverts-field-text #post_title").keyup( function() {
        var $this = jQuery(this);
        if($this.val().length > 110)
            $this.val($this.val().substr(0, 110));
    });
});

输入字段：

<div class="adverts-control-group adverts-field-text">
    <label for="post_title">Title
        <span class="adverts-form-required">*</span>
    </label>
    <input name="post_title" id="post_title" type="text">
</div>

更新

更新了代码，感谢@ dhaval-marthak。有用。问题是当输入长度等于0时如何在<span class="title-counter"></span>标签中显示有关长度限制的默认信息？我试过这个：<span class="title-counter">\(the input limit is 110 characters\)</span>，但是当我删除输入的文本时它不再显示。

# add a span tag to display the counter
jQuery("#post_title").prev("label").children(".adverts-form-required").after("<span class=\"title-counter\"></span>");

# add an input length limit
jQuery("#post_title").keypress(function(){
    if(this.value.length > 110){
        return false;
    }
    jQuery(".title-counter").html("are left: " +(110 - this.value.length) +" characters");
});

Answer 1

只需在HTML中设置限制即可？它将被计数器覆盖。然后当textarea为空时，重置HTML。

根据@ dhaval-marthak的回答：

<强> HTML

<textarea></textarea>
<span id="remaining"></span>
<span id="limit">(the input limit is 110 characters)</span>

<强>的Javascript

$('textarea').keyup(function () {
    if (this.value.length === 0) {
        $('#limit').show();
        $('#remaining').hide();
    } else {
        $('#limit').hide();
        $('#remaining').show();
    }

    if (this.value.length > 110) {
        return false;
    }

    $("#remaining").html("Remaining characters : " + (110 - this.value.length));
});

更新小提琴： http://jsfiddle.net/r34gM/185/

显示输入长度

1 个答案: