两个有意思的HTML5的tips

攻城师 2013-05-14

转自:http://www.zhurouyoudu.com/index.php/archives/782/

 

两个有意思的HTML5的tips

   今天看到两个不错的HTML5玩意,感觉有意思,分享一下。
   一个是Placeholder,Placeholder是HTML5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现,一般原理就是处理focus事件。不过现在简单多了。
   <input id="searchKey" type="text" placeholder="请输入关键字" />
   效果如下:
   
   如果要控制样式,可以这么来:
::-webkit-input-placeholder {
    color: #f00;
}
 
input:-moz-placeholder {
    color: #f00;
}

   如果不支持HTML5的浏览器就自己实现吧,反正不支持HTML5的浏览器加上这个属性也不影响页面显示。另外,HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。
    新增的type属性比较有用的就属 email,datetime,date,range等。不过我喜欢用的firefox对这些支持不好,仅支持Email。
   HTML5的另一个新玩法——语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单,只需要在input添加属性x-webkit-speech即可,例子如下:
<input type="text" x-webkit-speech />
这样你的输入框右边里就多了个「小话筒」,点击的时候就会提示。其带有一个onwebkitspeechchange函数,就是语音发生变化时触发的事件,一般可以作为提交事件使用,达到自动搜索的效果。

参考:http://www.w3.org/html/wg/drafts/html/master/forms.html#the-input-element

相关推荐