JS动态呈现还可以输入字数

时间：2023-03-09 03:08:14
JS动态呈现还可以输入字数

现在觉得当我们使用js或者jquery来呈现一个动态效果时，主要还是要想清楚它的思想、它的原理。而动态呈现输入字数，其实就是给它设置一个最大输入字数，然后获取已输入的字数，自然想做什么都可以。

<script>

    function  setShowLength(obj,maxlength,id){

        var remain= maxlength - obj.value.length;

        var oid = id;

        if(remain<){ remain=; }

        document.getElementById(oid).innerHTML = "还可以输入"+remain+"字数";

    }

</script>

<input type="text" name="title" size="" maxlength="" onkeyup="javascript:setShowLength(this,15,'content');" />

<span id="content">还可以输入15个字数</span>

　　

这是个用原生js的，自然也是可以用jquery写出来。

　　　

<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>

    <script language="javascript" type="text/javascript">

        $(document).ready(function() {

            $(document).keyup(function() {

                var counter = $("#divform textarea").val().length; //获取文本域的字符串长度

                $("#gptu var").text( - counter);    //每次减去字符长度

            });

        });

    </script>

    <div id="divform" align="center">

        <p id="gptu">

            你还可以输入<var style="color: #C00">--</var>个字符。</p>

        <p>

            <label>

                <textarea name="" cols="" rows="" maxlength="" style="height: 80px; width: 400px"></textarea>

            </label>

        </p>

    </div>

　　　刨去几句css，原理都是一样的。

　　　在网上还可以看到相关的应用，就是类似微博的文字输入框

相关文章