input\textarea剩余字符数提示（jQuery）

最新推荐文章于 2024-06-18 23:00:00 发布

原创最新推荐文章于 2024-06-18 23:00:00 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个实用的JavaScript脚本，该脚本能够实时显示HTML页面中输入框及文本域剩余可输入的字符数量。通过监听键盘输入事件并更新提示信息，帮助用户了解其输入内容是否超出限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function(){

    checkInput();
    checkTextarea();
});
function checkInput() {


    $("input").keydown(function () {

        var length = $(this).val().length;
        var max = $(this).attr("maxlength");
        var readOnly = $(this).attr("readonly");
        var id = $(this).attr("id");
        var num = max - length;
        $("#p_" + id).remove();
        if (!readOnly) {
            if (num > 0) {
                $(this).after("<p id=p_" + id + "><span style=color:blue>剩余字符数：<span style=color:#00ff00>" + num + "</span></span></p>");
            }
        }

    });
}
function checkTextarea() {
    $("textarea").keydown(function () {
        var length = $(this).val().length;
        var max = $(this).attr("maxlength");
        var readOnly = $(this).attr("readonly");
        var id = $(this).attr("id");
        var num = max - length;
        $("#p_" + id).remove();
        if (!readOnly) {
            if (num > 0) {
                $(this).after("<p id=p_" + id + "><span style=color:blue>剩余字符数：<span style=color:#00ff00>" + num + "</span></span></p>");
            }
        }
    });
}