Textarea input character limit (compatible with iOS & Android)-JS Tutorial-php.cn

Recently I am working on a WeChat public account page, which has a limit on the number of input characters for the textarea, and it needs to be compatible with iOS and Android phones. I will paste the code directly below:
<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>
Copy after login
Pitfalls encountered: I just started using onkeyup and found that the iOS system does not support it. I switched to oninput and tested OK.
The above is the detailed content of Textarea input character limit (compatible with iOS & Android). For more information, please follow other related articles on the PHP Chinese website!