html5配合css3實現帶提示文字的輸入框(擺脫js)_HTML5教程

      編輯Tag賺U幣

      推薦:程序設計HTML5 Canvas API
      本文小編為大家介紹關于程序設計程序設計HTML5 Canvas API ,有需求的朋友可以參考一下。

      很久沒寫過技術文章了,最近一直在以Webkit作為載體開發系統,當然需要大量使用Html5與CSS3,不僅減少大量的JS還可以保證更流暢。
       
      當選中對話框后,提示文字變淺色,輸入后消失.這個現在通行的做法是在Input標簽后面增加一個Label。使用JS控制。
      HTML5出現后,我們有一個更好的方法。 

      復制代碼 代碼如下:www.wf0088.com

      <input type="text" placeholder="用戶名或郵件地址" name="username"/>

      我們看到有placeholder標簽,可以作為用戶文字提示。這樣子就非常方便了。但是為了最求完美,我們需要在選中后,將文字變淺,或者修改提示文件的樣式,我們該怎么辦?

      復制代碼 代碼如下:www.wf0088.com

      input::-webkit-input-placeholder {
      color: #999;
      -webkit-transition: color.5s;
      }
      input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {
      color: #c2c2c2;
      -webkit-transition: color.5s;
      }

      -webkit-input-placeholder,webkit特有的一個css,可以控制里面的文字樣式,配合css3的動畫效果和偽類,我們就可以很容易做出一個帶動畫的輸入框,在系統登錄、搜索等位置很適合。當然你要為了兼容IE6,這個方法是行不通。不過Ie9也支持placeholder標簽,就是無法修改它的顏色而已。
      那么,如果不支持該怎么辦?可以簡單直接使用Jquery幫忙,那么在就不在本文討論范圍了。
      給一個Demo,Demo地址 必須在Webkit瀏覽器下才看到完整效果。是不是很方便?

      分享:突襲HTML5之Javascript API擴展5—其他擴展(應用緩存/服務端消息/桌面通知)
      前面已經總結了主要的API擴展(應用緩存/服務端消息/桌面通知),下面的幾個只有在特定的場合才能發揮它的潛質,無一例外,IE均不支持,桌面通知目前只有Chrome支持,感興趣的朋友可以了解下,或許對你有所幫助

      來源:未知//所屬分類:HTML5教程/更新時間:2013-04-22
      相關HTML5教程