資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 jQuery 中限制 textarea 的字元輸入並顯示字元計數？
假設允許輸入的總字元數為 N，使用者已在 textarea 中輸入了 M 個字元，其中 N>M。現在只剩下 (N-M) 個字元可以輸入。當 (N-M) 變為 0 後，就不允許再輸入字元。本文使用 JQuery，透過三個不同的示例說明了如何在 textarea 中限制字元輸入的過程。第一個示例使用了 textarea 的 maxlength 屬性。第二個示例在達到限制後停用文字區域，第三個示例使用 preventDefault 事件來阻止在達到指定限制後進一步輸入字元。
示例 1：使用 Jquery 和 maxlength 屬性限制 textarea 中的字元輸入
所需步驟
步驟 1 − 建立一個 html 檔案並開始編寫程式碼。在 script 標籤內包含 jQuery 所需的庫。
步驟 2 − 在 body 標籤內，建立一個具有 id 和 name 屬性的 textarea。
步驟 3 − 為此 textarea 指定 maxlength 等於 25。
步驟 4 − 建立一個 pre 標籤併為其指定一個類名。剩餘可輸入字元數將顯示在此標籤內。
步驟 5 − 在 script 標籤內，編寫 jQuery 函式。在 jQuery 函式中，首先將 totalcharacters 和 maxlength 值設為相同。持續計算剩餘可輸入字元數和限制。並將結果顯示在 pre 標籤中。
步驟 6 − 在瀏覽器中載入 HTML 檔案並檢查結果。
步驟 7 − 在文字區域中輸入字元。檢查在達到 25 的限制後是否無法再輸入更多字元。
html 檔案程式碼
<!-- How to limit character input in textarea including count in jQuery ? -->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var totalchar = 25;
$('textarea').keydown(function () {
var leftchars = totalchar - $(this).val().length;
$('.remaining').text(leftchars);
});
});
</script>
</head>
<body>
<center>
<h2>
Limit the entered characters
</h2>
<textarea id="textarrID1" name="textname1" rows="5" cols="20" maxlength="25"></textarea>
<pre> You can enter <span class="remaining">25</span> more characters </pre>
</center>
</body>
</html>
示例 2：使用 Jquery 和停用選項限制 textarea 中的字元輸入
所需步驟
步驟 1 − 建立一個 html 檔案並開始編寫程式碼。在 script 標籤內包含 jQuery 所需的庫。
步驟 2 − 在 body 標籤內，建立一個具有 id 和 name 屬性的 textarea。
步驟 3 − 建立一個 pre 標籤併為其指定一個類名。剩餘可輸入字元數將顯示在此標籤內。
步驟 4 − 在 script 標籤內，編寫 jQuery 函式。在 jQuery 函式中，首先為限制指定 totalcharacters 值。持續計算剩餘可輸入字元數和限制。並將結果顯示在 pre 標籤中。
步驟 5 − 新增一個條件，在達到限制時停用 textarea。
步驟 6 − 在瀏覽器中載入 HTML 檔案並檢查結果。
步驟 7 − 在文字區域中輸入字元。檢查在達到限制後 textarea 是否被停用。
html 檔案程式碼
<!-- How to limit character input in textarea including count in jQuery ? -->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var totalchar = 25;
$('textarea').keydown(function () {
var leftchars = totalchar - $(this).val().length;
$('.remaining').text(leftchars);
if (leftchars == 0){
document.getElementById('textarrID1').disabled = true;
}
});
});
</script>
</head>
<body>
<center>
<h2>
Limit the entered characters
</h2>
<textarea id="textarrID1" name="textname1" rows="5" cols="20" ></textarea>
<pre> You can enter <span class="remaining">25</span> more characters </pre>
</center>
</body>
</html>
示例 3：使用 Jquery 和 event.preventDefault() 限制 textarea 中的字元輸入
所需步驟
步驟 1 − 建立一個 html 檔案並開始編寫程式碼。在 script 標籤內包含 jQuery 所需的庫。
步驟 2 − 在 body 標籤內，建立一個具有 id 和 name 屬性的 textarea。
步驟 3 − 建立一個 pre 標籤併為其指定一個類名。剩餘可輸入字元數將顯示在此標籤內。
步驟 4 − 在 script 標籤內，編寫 jQuery 函式。在 jQuery 函式中，首先為限制指定 totalcharacters 值。持續計算剩餘可輸入字元數和限制。並將結果顯示在 pre 標籤中。
步驟 5 − 新增一個條件，並在達到限制時呼叫 event.preventDefault()。
步驟 6 − 在瀏覽器中載入 HTML 檔案並檢查結果。
步驟 7 − 在文字區域中輸入字元。檢查在達到指定限制後是否無法再輸入更多字元。
html 檔案程式碼
<!-- How to limit character input in textarea including count in jQuery ? -->
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var totalchar = 25;
$('textarea').keydown(function (event) {
var leftchars = totalchar - $(this).val().length;
$('.remaining').text(leftchars);
if (leftchars == 0){
event.preventDefault();
}
});
});
</script>
</head>
<body>
<center>
<h2>
Limit the entered characters
</h2>
<textarea id="textarrID1" name="textname1" rows="5" cols="20" ></textarea>
<pre> You can enter <span class="remaining">25</span> more characters </pre>
</center>
</body>
</html>
結論
本文透過三個不同的示例，說明了如何在 HTML 和 JQuery 中限制 textarea 中輸入的字元數。首先介紹了使用 textarea 的 maxlength 屬性的方法。在第二個示例中，在達到限制後停用 textarea，在第三個示例中，阻止了預設事件。
2K+ 瀏覽量
