两个有意思的HTML5的tips

最新推荐文章于 2024-09-08 07:56:47 发布

原创最新推荐文章于 2024-09-08 07:56:47 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php #javascript #ViewUI

html5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML5中的两个有趣的新特性：Placeholder属性允许在输入框中显示提示文本，并且可以通过CSS进行样式控制；语音搜索功能则利用了x-webkit-speech属性实现，为用户提供便捷的语音输入体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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