Textarea輸入字數限制（相容於iOS&安卓）-js教程-PHP中文網

最近在做一個微信公眾號的頁面，其中有對textarea做輸入字數限制，而且需要兼容iOS和安卓手機，下面直接貼代碼：
<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">html </span><span style="color: #ff0000">lang</span><span style="color: #0000ff">="en"</span><span style="color: #0000ff">></span>

<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>textarea输入字数限制（兼容ios和安卓）<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>

<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
    <span style="color: #008000"><!--</span><span style="color: #008000"> 最多输入10个字 </span><span style="color: #008000">--></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">textarea </span><span style="color: #ff0000">placeholder</span><span style="color: #0000ff">="请输入家庭地址（必填）"</span><span style="color: #ff0000"> rows</span><span style="color: #0000ff">="2"</span><span style="color: #0000ff">></</span><span style="color: #800000">textarea</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">textarea </span><span style="color: #ff0000">placeholder</span><span style="color: #0000ff">="请输入家庭地址（必填）"</span><span style="color: #ff0000"> rows</span><span style="color: #0000ff">="2"</span><span style="color: #0000ff">></</span><span style="color: #800000">textarea</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">textarea </span><span style="color: #ff0000">placeholder</span><span style="color: #0000ff">="请输入家庭地址（必填）"</span><span style="color: #ff0000"> rows</span><span style="color: #0000ff">="2"</span><span style="color: #0000ff">></</span><span style="color: #800000">textarea</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">textarea </span><span style="color: #ff0000">placeholder</span><span style="color: #0000ff">="请输入家庭地址（必填）"</span><span style="color: #ff0000"> rows</span><span style="color: #0000ff">="2"</span><span style="color: #0000ff">></</span><span style="color: #800000">textarea</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">textarea </span><span style="color: #ff0000">placeholder</span><span style="color: #0000ff">="请输入家庭地址（必填）"</span><span style="color: #ff0000"> rows</span><span style="color: #0000ff">="2"</span><span style="color: #0000ff">></</span><span style="color: #800000">textarea</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">textarea </span><span style="color: #ff0000">placeholder</span><span style="color: #0000ff">="请输入家庭地址（必填）"</span><span style="color: #ff0000"> rows</span><span style="color: #0000ff">="2"</span><span style="color: #0000ff">></</span><span style="color: #800000">textarea</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
    <span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> textarea </span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> document.getElementsByTagName(</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">textarea</span><span style="background-color: #f5f5f5; color: #000000">'</span><span style="background-color: #f5f5f5; color: #000000">);
    </span><span style="background-color: #f5f5f5; color: #0000ff">for</span><span style="background-color: #f5f5f5; color: #000000"> (</span><span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> i </span><span style="background-color: #f5f5f5; color: #000000">=</span> <span style="background-color: #f5f5f5; color: #000000">0</span><span style="background-color: #f5f5f5; color: #000000">; i </span><span style="background-color: #f5f5f5; color: #000000"><</span><span style="background-color: #f5f5f5; color: #000000"> textarea.length; i</span><span style="background-color: #f5f5f5; color: #000000">++</span><span style="background-color: #f5f5f5; color: #000000">) {
        textarea[i].oninput </span><span style="background-color: #f5f5f5; color: #000000">=</span> <span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">() {</span><span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">注意，这里要用oninput,不要用onkeyup,否则iOS系统不支持</span>
            <span style="background-color: #f5f5f5; color: #0000ff">this</span><span style="background-color: #f5f5f5; color: #000000">.value </span><span style="background-color: #f5f5f5; color: #000000">=</span> <span style="background-color: #f5f5f5; color: #0000ff">this</span><span style="background-color: #f5f5f5; color: #000000">.value.substring(</span><span style="background-color: #f5f5f5; color: #000000">0</span><span style="background-color: #f5f5f5; color: #000000">, </span><span style="background-color: #f5f5f5; color: #000000">10</span><span style="background-color: #f5f5f5; color: #000000">);
        }
    }
    </span><span style="color: #0000ff"></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>

<span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
登入後複製
遇到的坑：剛開始用onkeyup，發現iOS系統不支持，改用oninput，測試OK。
以上是Textarea輸入字數限制（相容於iOS&安卓）的詳細內容。更多資訊請關注PHP中文網其他相關文章！