苏飞论坛

标题: jquery-textarea字数提示效果 [打印本页]

---

作者: xyc    时间: 2021-6-29 14:30
标题: jquery-textarea字数提示效果
   平时做输入文本框的时候好多都是需要限制字数和显示输入字符的数量，今天咱们就来说下文本域的字数提示效果的实现方式。
    效果：
    (, 下载次数: 5)

上传

点击文件名下载附件
     HTML：
     

[HTML] 纯文本查看 复制代码

        <div class="content">

                <textarea class="textarea" placeholder="请输入内容"  maxlength="60" id="context"></textarea>

                <div class="input-num">

                        <span id="tips">0</span>

                        /60字

                </div>

        </div>

     css样式：
     

[CSS] 纯文本查看 复制代码

.content {

                    position: relative;

                    width:500px;

                    height:160px;

                }

                .content .textarea {

                    font-size: 14px;

                    color: #333;

                    padding: 12px 15px;

                    width: 100%;

                    height: 100%;

                    border: solid 1px #e7e7e7;

                    vertical-align: top;

                    resize: none;

                    box-sizing: border-box;

                }

                .content .input-num {

                    display: block;

                    position: absolute;

                    bottom: 6px;

                    right: 10px;

                    font-size: 12px;

                    color: #999;

                }

     js代码：
     

[JavaScript] 纯文本查看 复制代码

$(function () {

    var text = $('#context').val();

    var len = text.length;

    $('#tips').html(len);

    $('#context').keyup(function () {

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

        len = text.length;

        if (len > 60) {

            return false;

        }

        $("#tips").html(len);

    })

})

   以上就是文本域的显示字数提示的效果实现代码，希望可以帮助到大家！

---

作者: 范范    时间: 2021-6-29 16:27
实用， 支持楼主

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4