两个有意思的HTML5的tips

转自：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

标签: HTML5