【前端】自定义组件文本框加长度统计

所有交互方法都依赖于jQuery函数库

1、div+css布局组件

        <div style="float: left;">
            <input id="txt" style="width: 70%;padding:0 3%;height: 30px;border: none;outline: none;">
        </div>
        <div style="position: absolute; right: 0; top: 0; height: 100%; padding: 0 10px; background: #fff; color: #aaa;">
            <span id="count" style="">5</span><span>个字符</span>
        </div>
    </div>

2、简单交互实现

• html代码

        <div style="float: left;">
            <input id="txt" style="width: 70%;padding:0 3%;height: 30px;border: none;outline: none;">
        </div>
        <div style="position: absolute; right: 0; top: 0; height: 100%; padding: 0 10px; background: #fff; color: #aaa;">
            <span id="count" style="">5</span><span>个字符</span>
        </div>
    </div>

• js代码

        $(document).on("keyup", "#txt", function () {

            var length = $(this).val().length;

            $("#count").html(length);
        });
    </script>