昨晚有朋友求助，碰到一個需求，需要修改input，第一個需求是鼠標點擊input，提示字不消失，但是原input里面寫的是value = "提示字樣",我讓他將value改為placeholder之后解決了鼠標點擊輸入框提示字消失的問題；他們第二個需求是：鼠標點擊提示字不消失並且該字體需要變顏色，最可氣他們工程師還將js寫進了input標簽里(個人在這里十分不贊同這種做法，不利於維護，而且看起來很亂)。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <title>原代碼</title> 5 </head> 6 <body> 7 <input type="text" class="form-control" id="inputEmail3" name="textfield" value="聯系人" onfocus="if (value =='聯系人'){value =''}" onblur="if (value ==''){this.value ='聯系人';this.style.color='#000';}" /> 8 </body> 9 </html>
由於之前沒有碰到過這種需求，所以查閱了資料，做了如下的更改：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改后的代碼</title> <style type="text/css"> #inputEmail3.change::-webkit-input-placeholder { color: red; } #inputEmail3.change::-moz-placeholder { color: red; }
#inputEmail3.change::-ms-input-placeholder {
color: red;
}
</style> </head> <body> <input type="text" class="form-control" id="inputEmail3" name="textfield" placeholder="聯系人" onfocus="this.setAttribute('class', 'form-control change')" onblur="this.setAttribute('class', 'form-control')"/> </body> </html>
注：IE不支持placeholder屬性，故如需要在IE上兼容，需要先解決兼容問題。這里有一些其他作者方法僅供參考：http://www.cnblogs.com/yjzhu/p/4398835.html
最后。建議大家如果碰到這種需求還是將js，css，html放在各自的文件里，這樣有助於內容，樣式，功能的分離，有助於網站維護。