在編寫網頁或者應用程序時,統計字數是一個很常見的需求。而 JavaScript 作為一門廣泛應用于網頁開發的語言,也能夠很好地實現這個功能。
下面以輸入框為例,展示如何使用 JavaScript 統計字數:
<textarea id="input"></textarea>
<p>已輸入:0/100</p>
<script>
var input = document.getElementById("input");
var count = document.getElementById("count");
input.addEventListener("input", function() {
var length = input.value.length;
count.innerText = length;
});
</script>
以上代碼中,首先獲取輸入框和計數器兩個元素。然后通過 addEventListener 方法監聽輸入框的 input 事件,即輸入框內容發生變化時觸發。在事件處理函數中,通過獲取輸入框的 value 屬性,即輸入的文本內容,并獲取其 length 屬性,即字符個數。最后將字符個數賦值給計數器的 innerText 屬性,即可展示當前已輸入的字符數。
除了上述方法外,還有其他多種應用 JavaScript 統計字數的方法。例如,可以使用 jQuery 庫實現:
<textarea id="input"></textarea>
<p>已輸入:0</span>/100</p>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$("#input").on("input", function() {
var length = $(this).val().length;
$("#count").text(length);
});
</script>
以上代碼中,首先導入 jQuery 庫,然后通過 $() 函數獲取輸入框和計數器兩個元素,并使用 on() 方法監聽輸入框的 input 事件。在事件處理函數中,通過 $(this) 獲取當前輸入框的 jQuery 對象,并使用 val() 方法獲取輸入框的值。最后將字符個數賦值給計數器的 text() 方法,即可實現展示當前已輸入的字符數。
總體來說,JavaScript 提供了多種方式幫助我們實現統計字數的功能,根據具體情況選擇適合自己的方法即可。