html5 placeholder

時間 2019-12-09

原文原文鏈接

　　　placeholder是html5<input>標籤的一個屬性，placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失。html

　　　註釋：placeholder 屬性適用於如下的 <input> 類型：text, search, url, telephone, email 以及 password。html5

　　　例子：　　瀏覽器

　　   <!DOCTYPE HTML>
        <html>
        　　<body>this

　　　　<form action="/example/html5/demo_form.asp" method="get">
　　　　　　<input type="search" name="user_search" placeholder="Search W3School" />
　　　　　　<input type="submit" />
　　　　</form>url

　　　　</body>
　　 </html>spa

　　實際效果：3d

　　輸入字符後：orm

　　目前瀏覽器的支持狀況htm

瀏覽器	IE6/7/8/9	IE10+	Firefox	Chrome	Safari
是否支持	NO	YES	YES	YES	YES

　　然而，雖然IE10+支持placeholder屬性，它的表現與其它瀏覽器也不一致blog

IE10+裏鼠標點擊時（獲取焦點）placeholder文本消失
Firefox/Chrome/Safari點擊不消失，而是鍵盤輸入時文本消失

　　那麼對於IE6-9的瀏覽器怎麼辦呢，處理這類兼容性有關的問題，少不了瀏覽器的判斷。可是通常的解決核心是要判斷的不是是否是IE(因之後IE會支持), 而是是否支持placeholder屬性。請參見以下代碼：

　　js代碼：

　　//判斷是否支持placeholder
　　function _placeholderSupport(){
  　　　function placeholderSupport(){
   　　　　　return 'placeholder' in document.createElement('input');
  　　　 }
  　　　if(!placeholderSupport()){
   　　    　　$('[placeholder]').focus(function(){
    　　　　   var input = $(this);
    　　　　　if(input.val() == input.attr('placeholder')){
     　　　　　　input.val('');
     　　　　　　 input.removeClass('placeholder');
    　　　　　}
   　　     　 }).blur(function(){
    　　　　　　　var input = $(this);
    　　　　　　　if(input.val() == ''||input.val() == input.attr('placeholder')){
     　　　　　　　　　input.addClass('placeholder');
     　　　　　　   　　input.val(input.attr('placeholder'));
    　　　　　　　}
   　　　　　　}).blur();
  　　　　};
　　}