Begrenzung der Texteingabezeichen (kompatibel mit iOS und Android)

Vor Kurzem arbeite ich an einer öffentlichen WeChat-Kontoseite, bei der die Anzahl der Eingabezeichen für den Textbereich begrenzt ist und die mit iOS- und Android-Telefonen kompatibel sein muss:

<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>

Aufgefallene Fallstricke: Ich habe gerade mit der Verwendung von onkeyup begonnen und festgestellt, dass das iOS-System es nicht unterstützt. Ich bin auf oninput umgestiegen und habe es getestet.

Das obige ist der detaillierte Inhalt vonBegrenzung der Texteingabezeichen (kompatibel mit iOS und Android). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!