在 Html Textarea 中設定 maxlength

問題描述

如何將 maxlength 設定為 textarea？為什麼 maxlength 在 textarea 中不能正常工作？

最佳解決方案

在 HTML5 之前，我們有一個簡單但可行的方法：首先在 textarea 元素中設定一個 maxlength 屬性：

<textarea maxlength='250' name=''></textarea>

然後使用 JavaScript 來限制使用者輸入：

$(function() {  
    $("textarea[maxlength]").bind('input propertychange', function() {  
        var maxLength = $(this).attr('maxlength');  
        if ($(this).val().length > maxLength) {  
            $(this).val($(this).val().substring(0, maxLength));  
        }  
    })  
});

確保繫結”input” 和”propertychange” 事件使其在各種瀏覽器 (如 Firefox /Safari 和 IE) 上工作。

次佳解決方案

如果使用 HTML 5，則需要在 DOCTYPE 宣告中指定。

對於有效的 HTML 5 檔案，應從以下開始：

<!DOCTYPE html>

在 HTML 5 之前，textarea 元素沒有 maxlength 屬性。

您可以在 DTD/spec 中看到這一點：

<!ELEMENT TEXTAREA - - (#PCDATA)       -- multi-line text field -->
<!ATTLIST TEXTAREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  rows        NUMBER         #REQUIRED
  cols        NUMBER         #REQUIRED
  disabled    (disabled)     #IMPLIED  -- unavailable in this context --
  readonly    (readonly)     #IMPLIED
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  onselect    %Script;       #IMPLIED  -- some text was selected --
  onchange    %Script;       #IMPLIED  -- the element value was changed --
  %reserved;                           -- reserved for possible future use --
  >

為了限制輸入到 textarea 的字元數，您需要使用 JavaScript 與 onChange 事件。然後，您可以對字元數進行計數，並禁止進一步輸入。

Here 是關於文字輸入的 in-depth 討論，以及如何使用伺服器端和客戶端指令碼來限制大小。

Here 是另一個樣品。

第三種解決方案

在 html4 中為 textarea 做最大長度的簡單方法是：

<textarea cols="60" rows="5" onkeypress="if (this.value.length > 100) { return false; }"></textarea>

將”100″ 更改為所需的許多字元

第四種方案

正如我在 aqingsao 的回答中所說的那樣，當 textarea 有換行符時，至少在 Windows 上不行。

我稍稍改變了答案：

$(function() {
    $("textarea[maxlength]").bind('input propertychange', function() {
        var maxLength = $(this).attr('maxlength');
        //I'm guessing JavaScript is treating a newline as one character rather than two so when I try to insert a "max length" string into the database I get an error.
        //Detect how many newlines are in the textarea, then be sure to count them twice as part of the length of the input.
        var newlines = ($(this).val().match(/n/g) || []).length
        if ($(this).val().length + newlines > maxLength) {
            $(this).val($(this).val().substring(0, maxLength - newlines));
        }
    })
});

現在，當我嘗試使用換行符貼上大量資料時，我將獲得正確的字元數。

參考文獻

Set maxlength in Html Textarea [duplicate]

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

在 Html Textarea 中設定 maxlength