input、textArea实时显示剩余可输入的字数

最新推荐文章于 2024-08-16 13:24:28 发布

转载最新推荐文章于 2024-08-16 13:24:28 发布 · 542 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/beli/p/9412546.html

文章标签：

#javascript #ViewUI

本文介绍了一种实时显示输入字段中剩余可输入字数的方法，适用于昵称和评论内容等短文本输入场景，通过JavaScript实现对输入字符数量的即时反馈。

<h2>实时显示剩余可输入的字数（字母，数字，中文都算一个字）</h2>
        <h>昵称:</h>
        <div>
            <input type="text" class="myText" onKeyUp="keypress(this)" />
            <label class="name">15</label><span>/</span><label class="maxleng">15</label>
        </div>
        <h>评论内容:</h><br>
        <div>
            <textarea class="myText" style="width: 200px;height: 50px;" onKeyUp="keypress(this)" ></textarea>
            <label class="name">30</label><span>/</span><label class="maxleng">30</label>
        </div>
        <script type="text/javascript">
            function keypress(t) {
                var txt=$(t).val().length;
                var len=$(t).parent().children('.maxleng').html()-txt;
                if(len>=0){
                    $(t).parent().children('.name').html(len);
                }else{
                    $(t).val($(t).val().substring(0,$(t).parent().children('.maxleng').text()));
                }
            }
        </script>