文本域

文本域

textarea稱文本域,又稱文本區,即有滾動條的多行文本輸入控制項,在網頁的提交表單中經常用到。與單行文本框text控制項不同,它不能通過maxlength屬性來限制字數,為此必須尋求其他方法來加以限制以達到預設的需求。

限制字數方法

通常的做法就是使用JavaScript腳本語言來實現對textarea文本域的字數輸入限制,簡單而實用。假設我們有一個id為 txta1 的textarea文本區,我們可以通過以下代碼限制它的鍵盤輸入字數為10個字(漢字或其他小角字元):

<script language="javascript" type="text/ecmascript">

window.onload = function()

{

document.getElementById('txta1').onkeydown = function()

{

if(this.value.length >= 10)

event.returnValue = false;

}

}

</script>

它的原理是通過對keydown(鍵盤鍵位按下)事件對指定id號的文本區進行監測,它只能限制鍵盤輸入,如果用戶通過滑鼠右鍵貼上剪下板中的文本,它無法控制字數。試看以下效果,請嘗試用鍵盤輸入:

速度速度分散對

通過鍵盤輸入,以上文本區只能輸入10個字。但是,我們的目的並沒有達到!請隨便複製一些文本,試著用滑鼠右鍵貼上,看看發生了什麼。

你可以在網上找到類似上述的其他JS腳本,它們不管多么優秀,其原理都是一樣的,通過對keydown、keyup或keypress之類的鍵盤鍵位操作事件來監控文本區的輸入,無法防止滑鼠右鍵的貼上,為此,如果一定要真正地限制textarea的字數,我們還得為網頁加另一把鎖——禁用滑鼠右鍵,這無疑得付出額外的開銷,同時也可能是網頁製作者不一定願意做的。其實,還有一個更簡單的方法,使用onpropertychange屬性。

onpropertychange可以用來判斷預定元素的value值,當元素的value值發生變化時判斷事件就會被觸發,僅關心被監測元素的value值,避開了輸入的來源,從而可以比較理想地達成我們的限制字數這一目的。它屬於JS範疇,可以在表單方框區代表中嵌套使用,以下是代碼和效果樣式,可以像上面那樣測試輸入,你會發現它真正達到目的:不管用什麼方式輸入,它只能輸入100個字(漢字或其他小解符號):

代碼:

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

樣式:

當然,為了更為保險,處理表單數據的後台腳本程式還應該對提交來的數據進行再一次的檢測,如果字數超出預設的數量則進行相應處理,這樣才達到真正限制字數的目的。

幾種樣式

1.沒有滾動條的文本域(無框線)

<textarea style="border: 0; overflow: auto; color: #FFFFFF; background-image: url(http://expert.csdn.net/images/csdn.gif)"></textarea>

2.紅色框線的文本域

<textarea style="border: #FF0000 1px solid; overflow: visible; color: #FFFFFF; background-image: url(http://expert.csdn.net/images/csdn.gif)"></textarea>

3.無框線有滾動條

<textarea style="scrollbar-face-color:#ff80ff;border:0px;background-image:url(http://expert.csdn.net/images/ad/dby3_database_120.GIF);color:#ffffff;font-size:15pt;font-weight:bold">

雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人 <br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人< br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>

</textarea>

4.比較好看的一個

<input name="email" type="text" id="email" style="height:19;border-top: 1px solid #808080;border-right: 1px solid #D4D0C8;border-bottom: 1px solid #D4D0C8;border-left: 1px solid #808080;" value="" size="29">

<br>

<textarea name="content" cols="36" rows="8" id="content" style="border: 1 solid #888888;LINE-HEIGHT:18px;padding: 3px;"></textarea>

<textarea style="border: #FF0000 1px solid; overflow: visible; color: #FFFFFF; background-image: url(http://expert.csdn.net/images/csdn.gif)"></textarea>

其它:

<textarea style="border: 0; overflow: auto; color: #FFFFFF; background-image: url(http://expert.csdn.net/images/csdn.gif)"></textarea>

1、設定文本域的字型

<TEXTAREA STYLE="font-size:9pt;font-family:verdana;color:#333333">輸入內容</textarea>

2、設定文本域的背景色

<TEXTAREA STYLE="background-color:#ffffff">輸入內容</textarea>

3、文本域的虛線框線設定

<TEXTAREA STYLE="border:1px dotted #6CABE7;">輸入內容</textarea>

4、文本域的實線框線設定

<TEXTAREA STYLE="border:1px solid #6CABE7;">輸入內容</textarea>

5、文本域的點線框線設定

<TEXTAREA STYLE="border:2px dotted #6CABE7;">輸入內容</textarea>

6、 設定文本域的背景圖

<TEXTAREA STYLE="background-attachment: fixed; background-image: url(背景圖所處位置)"></textarea>

相關詞條

相關搜尋

熱門詞條

聯絡我們