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