javascript遇到html5的一些表單屬性_javascript技巧

input屬性：
placeholder:輸入框的預設值，向使用者顯示描述性說明文字或提示訊息

autocomplete：值為on和off。 。 on則代表當該欄位填寫並提交後再回傳該頁，再輸入時會顯示先前輸入的。 off則關閉，包含使用者輸入資料的安全。預設為on
autofocus：頁面載入時設定某個input自動取得焦點，注意頁面只能設定一個input的這個屬性，設定多個相當於沒有設定。
list特性和datalist：透過list為某個輸入框增加下拉式清單。 。相當於js實現的「自動完成」功能，但不能進行模糊查詢
如果datalist內有2項值："a34343"和"並24234",用戶希望的是輸入了3後這2個值都出現，但實際上一個也不出現。
它要求是完全匹配，例如輸入a，則下拉a34343出現，接著輸入4，那麼這個下拉值也就沒有了。

required：表單提交前該元素必須填寫，即不能為空。不建議使用，因為提示資訊‘請填寫此欄位'，除非有屬性可以取代該提示資訊。
pattern：寫正規在input標籤內的地方。 。 type為email或url的輸入控制項內建相關正規表示式，如果value不符合其正規表示式，則表單將通不過驗證，無法提交。 。
不建議給type為email或url的元素使用，因為提示訊息固定,正規固定。 。還不如js直接重寫。

一些輸入設定：
rangeUnderflow 限制數值控制項的最小值 設定min， input type="number" min="0" value="20"
rangeOverflow 限制數值控制項的最大值 設定max，input type="number" max="100" value="20"
stepMismatch 確保輸入值符合min,max,step的設定 設定max min step， input type="number" min="0" max="100" step="10" value="20"

下面是input=number用的一個小函數：

function inputV(inpFields,tips){//input值范围判断。。0-100.正正数
/**
* input值范围判断。。0-100.正正数
* range 范围：使用<input type="number" min="0" max="100"/>
* if(inputV(v3,msgABC.t4)==false){return false;}
* **/
var km=inpFields[0].validity,v3=inpFields.val();
console.log('不是数字：',km.badInput,'超出范围：',km.rangeOverflow,'小于最小值：',km.rangeUnderflow);
if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a返回true 22返回true -1 返回 true
alert(tips);
return false;
}
if(isNaN(parseInt(v3))){
console.log('NaN 不判断.因为值为空');
return true;
}
else if(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){//不是数字!!isNaN('v3')
alert(tips);
return false;
}
return true;
}

list特性和datalist:

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

<form action="http://localhost/test.php" method="post" id="register"></form>
url：<input type="url" name="url" form="register" required/><br />
user：<input type="text" name="user" value="" form="register"/><br />
pwd：<input type="password" name="pwd" value="" form="register" /><br />
<select name="year" form="register">
<option value="1970">1970</option> 
<option value="1980">1980</option> 
<option value="1990">1990</option> 
</select>
<input type="submit" value="注册" form="register"/>

正規：

信箱：

地址：
DATE:

TIME:
MONTH:
週：
數字：

滑動條
搜尋 :
顏色：

自動填入表單

<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>11111111</option>
<option>243234234</option>
<option>3324234</option>
</datalist>

輸出表單output

<form action="" method="post" oninput="result.value=parseInt(no1.value*no2.value)">
<input type="number" name="no1" value=""/>
<input type="number" name="no2" value=""/>
<output name="result" ></output>
</form>

以上所述就是本文的全部內容了，希望大家能夠喜歡。