網頁

▼

2019/8/6

HTML <input> maxlength屬性

HTML <input>元素的maxlength屬性作用如下。

<input>元素的maxlength屬性用來限制輸入欄位的可輸入字數(the number of characters)。


可使用maxlength屬性的<input>類型(type)包括以下：

  • text：一般文字輸入欄位
  • search：搜尋欄位
  • tel：電話輸入欄位
  • url：URL輸入欄位
  • email：Email輸入欄位
  • password：密碼輸入欄位

總之就是那些可用來輸入文字的欄位類型。


例如下面分別為maxlength值為5，10，30的輸入欄位。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>
        <label>最多可輸入5個字:</label>
        <input type="text" maxlength="5">
    </div>
    <div>
        <label>最多可輸入10個字:</label>
        <input type="password" maxlength="10">
    </div>
    <div>
        <label>最多可輸入30個字:</label>
        <input type="email" maxlength="30" size="50">
    </div>

</body>
</html>

效果如下。



<input>若沒設定maxlength的話，預設欄位中可以輸入無限多個字（其實依瀏覽器而定，Chrome的上限為524288個字）。

然後注意不要與設定欄位顯示長度的size屬性搞混。


參考：

沒有留言:

張貼留言