html5 input placeholder相容性處理

標籤：style   blog   color   io   ar   java   for   sp   div   

1.HTML5對Web Form做了許多增強，比如input新增的type類型、Form Validation等。Placeholder是HTML5新增的另一個屬性，當input或者textarea設定了該屬性後，該值的內容將作為灰字提示顯示在文字框中，當文字框獲得焦點時，提示文字消失。以前要實現這效果都是用JavaScript來控制才能實現；

2.由於placeholder是個新增屬性，目前只有少數瀏覽器支援，如何檢測瀏覽器是否支援它呢？(更多HTML5/CSS3特性檢測可以訪問)

1 function hasPlaceholderSupport() {2   return ‘placeholder‘ in document.createElement(‘input‘);3 }

3.預設提示文字是灰色的，可以通過CSS來改變文字樣式：

 1 /* all */ 2 ::-webkit-input-placeholder { color:#f00; } 3 input:-moz-placeholder { color:#f00; } 4   5 /* individual: webkit */ 6 #field2::-webkit-input-placeholder { color:#00f; } 7 #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } 8 #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } 9  10 /* individual: mozilla */11 #field2:-moz-placeholder { color:#00f; }12 #field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }13 #field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

 

html5 input placeholder相容性處理