動態檢測輸入

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

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" οninput="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));}}

轉載于:https://www.cnblogs.com/luxiaojun/p/5909972.html

總結

以上是生活随笔為你收集整理的文本输入框内实时检测输入的字数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。