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

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

     

<script>
    function  setShowLength(obj,maxlength,id){
        var remain= maxlength - obj.value.length;
        var oid = id;
        if(remain<0){ remain=0; }
        document.getElementById(oid).innerHTML = "还可以输入"+remain+"字数";
    }
</script>


<input type="text" name="title" size="50" maxlength="15" 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(200 - counter);    //每次减去字符长度
            });

        });
    </script>

    <div id="divform" align="center">
        <p id="gptu">
            你还可以输入<var style="color: #C00">--</var>个字符。</p>
        <p>
            <label>
                <textarea name="" cols="" rows="" maxlength="200" style="height: 80px; width: 400px"></textarea>
            </label>
        </p>
    </div>

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

 

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