本框是表單中與用戶打交道最多的元素之一,它包括單行文本框<input type="text">和多行文本框<textarea>,
更廣義的還可以包括密碼輸入框<input type="password">。
控制用戶輸入字符個(gè)數(shù)
對(duì)于單行文本框<input type="text">和密碼輸入框<input type="password">而言,可以利用自身的maxlength屬性控制用戶輸入字符的個(gè)數(shù);
<input type="text" name="name" id="name" class="txt" value="姓名" maxlength="10"/>
而對(duì)于多行文本框<textarea>沒(méi)有類似的屬性,可以自定義類似的屬性,并對(duì)onkeypress事件做相應(yīng)的處理
<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea/>
以上代碼中maxlength為自定義屬性(<textarea>標(biāo)簽中沒(méi)有這個(gè)maxlength屬性),其值為最多允許輸入的字符的個(gè)數(shù),
在onkeypress事件發(fā)生時(shí)則調(diào)用返回LessThan()函數(shù)的返回值,函數(shù)如下:
function LessThan(oTextArea){
//返回文本框字符個(gè)數(shù)是否符號(hào)要求的boolean值
return oTextArea.value.length < oTextArea.getAttribute("maxlength");
}
實(shí)例:
<html>
<head>
<title>控制textarea的字符個(gè)數(shù)</title>
<style>
<!--
form{
padding:0px;
margin:0px;
font:14px Arial;
}
input.txt{ /* 文本框單獨(dú)設(shè)置 */
border: 1px inset #00008B;
background-color: #ADD8E6;
}
input.btn{ /* 按鈕單獨(dú)設(shè)置 */
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
padding: 1px 2px 1px 2px;
}
-->
</style>
<script language="javascript">
function LessThan(oTextArea){
//返回文本框字符個(gè)數(shù)是否符號(hào)要求的boolean值
return oTextArea.value.length < oTextArea.getAttribute("maxlength");
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="addInfo.aspx">
<p><label for="name">請(qǐng)輸入您的姓名:</label>
<input type="text" name="name" id="name" class="txt" value="姓名" maxlength="10"></p>
<p><label for="comments">我要留言:</label><br>
<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn">
<input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn"></p>
</form>
</body>
</html>
設(shè)置鼠標(biāo)經(jīng)過(guò)時(shí)自動(dòng)選擇文本
通常是在用戶名、密碼等文本框中希望鼠標(biāo)指針經(jīng)過(guò)時(shí)自動(dòng)聚焦，并且能夠選中默認(rèn)值以便用戶直接刪除。
首先是鼠標(biāo)指針經(jīng)過(guò)時(shí)自動(dòng)聚焦，代碼如下
onmouseover="this.focus()"
其次是聚焦后自動(dòng)選中所有文本，代碼如下：
onfocus="this.select()"
如:<label for="name">請(qǐng)輸入您的姓名:</label>
<input type="text" name="name" id="name" class="txt" value="姓名" onmouseover="this.focus()" onfocus="this.select()">
javascript分離實(shí)現(xiàn)自動(dòng)選擇文本
定義一個(gè)帶圓角的Textbox,沒(méi)有用win32 Api，相對(duì)比用Api要好一點(diǎn)。注意窗口AutoScaleMode設(shè)置為None.
滿足以下2個(gè)條件時(shí)；
瀏覽器會(huì)自動(dòng)記錄輸入過(guò)的值；
當(dāng)用戶再次輸入的時(shí)候就能自動(dòng)完成；
1：input標(biāo)簽在form標(biāo)簽下；
2：點(diǎn)擊了此form標(biāo)簽下的submit按鈕；
具體的表現(xiàn)形式如下圖；
瀏覽器自動(dòng)顯示輸入過(guò)的值后會(huì)遮擋到下面的驗(yàn)證碼；
對(duì)于我這種記性差到即便只有這4個(gè)數(shù)字都懶得記；
非要邊看著驗(yàn)證碼邊輸入的人是無(wú)法忍受的；
額；好吧；我承認(rèn)記性是躺槍的；主要是懶；
如果說(shuō)驗(yàn)證碼這個(gè)示例你能忍受的話；
那么下面這張圖肯定是無(wú)法忍的了；
這個(gè)搜索框有一個(gè)ajax 事件了；
當(dāng)輸入內(nèi)容后會(huì)發(fā)送異步請(qǐng)求搜索商品；
但是瀏覽器的自動(dòng)顯示的輸入記錄就會(huì)遮擋后邊的搜索結(jié)果；
解決這個(gè)情況的方法是為input標(biāo)簽添加autocomplete屬性并設(shè)為off
<input class="text" autocomplete="off" type="text" name="word" value="輸入商品名稱">
順便介紹下autocomplete；
autocomplete是HTML5 中的新屬性它規(guī)定表單是否應(yīng)該啟用自動(dòng)完成功能。自動(dòng)完成允許瀏覽器預(yù)測(cè)對(duì)字段的輸入。當(dāng)用戶在字段開(kāi)始鍵入時(shí)，瀏覽器基于之前鍵入過(guò)的值，應(yīng)該顯示出在字段中填寫的選項(xiàng)。
值描述
- on默認(rèn)。規(guī)定啟用自動(dòng)完成功能。
- off規(guī)定禁用自動(dòng)完成功能。
