由于HTML5的出現(xiàn)，使得表單的功能更加強(qiáng)大，input的功能應(yīng)用起來更加簡單剩燥，從value到placeholder。但是由于兼容問題，placeholder只適合在移動(dòng)端的項(xiàng)目灭红，IE6/7/8不支持，只能用value口注，或者你可以用其他方法模擬placeholder变擒，具體案例你可以看支付寶和財(cái)付通的登錄和注冊(cè)頁面。下面分別介紹下value和placeholder的實(shí)際應(yīng)用寝志。
placeholder顧名思義是一個(gè)占位符娇斑。
在你的value為空的時(shí)候他才會(huì)顯示出來，但是他本身并不是value材部，也不會(huì)被表單提交毫缆。先顯示value,作為表單數(shù)據(jù)；如果沒有value則顯示placeholder乐导，一個(gè)占位符
placeholder顧名思義是一個(gè)占位符苦丁。 在你的value為空的時(shí)候他才會(huì)顯示出來,但是他本身并不是value,也不會(huì)被表單提交。
value
如果用的是value物臂，我們想鼠標(biāo)focus后默認(rèn)文字消失旺拉，移開后默認(rèn)文字又重現(xiàn)，可以這樣來寫棵磷。
<input type="text" value="請(qǐng)輸入手機(jī)號(hào)" class="inp-fon">
$(".inp-fon").focus(function(){
var oldValue = $(this).val();
if(oldValue == this.defaultValue){
$(this).val("").addClass('focus-fon');
}
}).blur(function(){
var oldValue = $(this).val();
if(oldValue == ""){
$(this).val(this.defaultValue).removeClass('focus-fon');;
}
});
請(qǐng)看下圖演示：
默認(rèn)狀態(tài)：
focus狀態(tài)
說明：默認(rèn)狀態(tài)是灰色的蛾狗，然后focus后，輸入的字體會(huì)變成黑色的仪媒，上面的JS里就是通過添加和刪除樣式“focus-fon”來控制的沉桌。
placeholder
如果用的是placeholder，我們就不需要JS了算吩，因?yàn)樗旧砭妥詭ocus和blur功能了留凭。但是有時(shí)候設(shè)計(jì)師給我們的設(shè)計(jì)稿往往跟默認(rèn)文字顏色是有區(qū)別的，那我們?nèi)绾胃淖僷laceholder默認(rèn)文字顏色呢赌莺，如下：
<input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" class="inp-fon">
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f00;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f00;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #f00;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #f00;
}
一般都是用以上這種方法來處理冰抢，這里就不放demo了，比較簡單艘狭，如果想看效果挎扰，把代碼復(fù)制到網(wǎng)頁里查看。
