文本域

文本域指在HTML中，使用 標籤來表示多行文本框。</p></div><div style="margin-bottom:15px"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3433639859637319" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-3433639859637319" data-ad-slot="4605745955" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div><div class="m-summary"></div><div class="content-catalog"><div class="catalog"><div class="bk-flex"><div class="content-catalog-left">目錄</div><div class="content-catalog-right bk-line"><div class="bk-column-6"><a href="#catalog_1" class="catalog-level-1"><em>1</em>限制字數方法 </a><a href="#catalog_2" class="catalog-level-1"><em>2</em>幾種樣式 </a></div></div></div></div></div><div class="wiki-content"><div class="catlog-title is-1"><h3>限制字數方法</h3><a id="catalog_1" class="title-anchor"></a></div><hr class="border-1"><div class="cp">通常的做法就是使用<a target="_blank" href="/wiki/3xvqg2vg2j42vmv.html" title="JavaScript">JavaScript</a><a target="_blank" href="/wiki/xkjre6n0vyvqx0.html" title="腳本語言">腳本語言</a>來實現對textarea文本域的字數輸入限制，簡單而實用。假設我們有一個id為 <a target="_blank" href="/wiki/gq6nwmer8jr90j.html" title="txt">txt</a>a1 的textarea文本區，我們可以通過以下代碼限制它的鍵盤輸入字數為10個字（漢字或其他小角字元）：</div><div class="cp"><<a target="_blank" href="/wiki/043o2rj5lr4ky8q.html" title="script">script</a> language="javascript" type="text/ecmascript"></div><div class="cp">window.onload = function()</div><div class="cp">{</div><div class="cp">document.getElementById('txta1').onkeydown = function()</div><div class="cp">{</div><div class="cp">if(this.value.length >= 10)</div><div class="cp">event.returnValue = false;</div><div class="cp">}</div><div class="cp">}</div><div class="cp"></script></div><div class="cp">它的原理是通過對<a target="_blank" href="/wiki/j9zmwoz7eemz3r2.html" title="keydown">keydown</a>（鍵盤鍵位按下）事件對指定id號的文本區進行監測，它只能限制鍵盤輸入，如果用戶通過滑鼠右鍵粘貼剪切板中的文本，它無法控制字數。試看以下效果，請嘗試用鍵盤輸入：</div><div class="cp">速度速度分散對</div><div class="cp">通過鍵盤輸入，以上文本區只能輸入10個字。但是，我們的目的並沒有達到！請隨便複製一些文本，試著用滑鼠右鍵粘貼，看看發生了什麼。</div><div class="cp">你可以在網上找到類似上述的其他<a target="_blank" href="/wiki/8vz9no8rlj0g0o2.html" title="JS腳本">JS腳本</a>，它們不管多麼優秀，其原理都是一樣的，通過對keydown、keyup或<a target="_blank" href="/wiki/e7w4lyx0ow6jllk.html" title="keypress">keypress</a>之類的鍵盤鍵位操作事件來監控文本區的輸入，無法防止滑鼠右鍵的粘貼，為此，如果一定要真正地限制textarea的字數，我們還得為網頁加另一把鎖——禁用滑鼠右鍵，這無疑得付出額外的開銷，同時也可能是網頁製作者不一定願意做的。其實，還有一個更簡單的方法，使用onpropertychange屬性。</div><div class="cp">onpropertychange可以用來判斷預定元素的value值，當元素的<a target="_blank" href="/wiki/jw4rxek6x8ly03n.html" title="value">value</a>值發生變化時判斷事件就會被觸發，僅關心被監測元素的value值，避開了輸入的來源，從而可以比較理想地達成我們的限制字數這一目的。它屬於<a target="_blank" href="/wiki/3xvqg2vg2j42vmv.html" title="JS">JS</a>範疇，可以在表單方框區代表中嵌套使用，以下是代碼和效果樣式，可以像上面那樣測試輸入，你會發現它真正達到目的：不管用什麼方式輸入，它只能輸入100個字（漢字或其他小解符號）：</div><div class="cp">代碼：</div><div class="cp"><textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" <a target="_blank" href="/wiki/4z89exlnm6y4glm.html" title="class">class</a>="smallArea" cols="60" name="txta" rows="8">