文本輸入框內實時檢測輸入的字數

動態檢測輸入

如下圖所示，我們該怎么動態監聽輸入框內輸入的數據呢？，這里就用到了幾個事件

1、focusin表示獲得焦點觸發事件

2、focusout表示失去焦點觸發事件

3、oninput事件來監聽文本框value值的改變

4、Math.abs(xxx)用於獲取數的絕對值

html

<span class="title2 hide">還可以輸入<span>140</span>字</span>
<textarea name="text" id="textarea" cols="30" rows="10" oninput="font_siz()"></textarea>

js

        $("#textarea").focusin(function () {
            $(".title").addClass("hide");
            $(".title2").removeClass("hide")
        });
        $("#textarea").focusout(function() {
            $(".title").removeClass("hide");
            $(".title2").addClass("hide")
        });
        function font_siz() {
            var num = $("#textarea").val().length;
            if(num<140){
                 $(".title2").html('還可以輸入'+ '<span></span>' + '字');
                var all = $(".title2 span").text();
                $(".title2 span").text(140-num);
            }else{
                 $(".title2").html('已超出'+ '<span>0</span>' + '字');
                var all = $(".title2 span").text();
                $(".title2 span").text(Math.abs(140-num));
            }

        }