文字輸入區塊 (Textarea)

新提案
→
封閉測試
→
公開測試
→
已穩定

成熟度說明

新提案：未完成開發、請勿使用。
封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

意見回覆

內容上限 200 字。

HTML

<div class="fields">
  <fieldset class="fieldset" data-limit-phrase="尚餘 {remaining} 字，|內容上限 {total} 字。">
    <label for="comment" class="field-label">意見回覆</label>
    <ul class="field-description" id="textarea-description">
      <li data-character-notice aria-live="polite" aria-atomic="true">內容上限 200 字。</li>
    </ul>
    <textarea id="comment" rows="4" data-character-limit="200" aria-describedby="textarea-description"></textarea>
  </fieldset>
</div>

JavaScript

使用 character-count.js。

JavaScript 行為使用的 data-attributes

fieldset[data-limit-phrase="{string}"]: 如「尚餘 {remaining} 字，|內容上限 {total} 字。」將剩餘數字寫在前面，便報讀軟體優先宣報給使用者聽。
li[data-character-notice][aria-live="polite"][aria-atomic="true"]：用來放置字數限制的規範。這行字將會隨著使用者輸入一邊立即更新。
textarea[data-character-limit="{number}"]：限制的字數量。

漸進增強規則

<li> 預設就請放入 data-limit-phrase 的後半部上限提醒。
無論如何，伺服器接收內容時仍須再次驗證字數。