利用HTML5+CSS3打造支持语音输入的搜索框-创新互联

这篇文章主要讲解了“利用HTML5+CSS3打造支持语音输入的搜索框”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“利用HTML5+CSS3打造支持语音输入的搜索框”吧!

创新互联公司服务项目包括荷塘网站建设、荷塘网站制作、荷塘网页制作以及荷塘网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,荷塘网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到荷塘省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
HTML

我们在页面中放置一个搜索表单form,在表单中分别有一个输入框以及一个搜索按钮。

       

细心的您会发现输入框input中多了三个属性,分别是placeholder,autofocus,x-webkit-speech,它们有着不同的作用。

placeholder:是为了设置初始值,并且这个初始值的颜色为灰色,当输入框input的内容变动时,这个值就消失。

autofocus:自动聚焦,当进入当前页面时,这个搜索输入框会自动获取焦点,而你可以在打开页面后直接输入关键字按回车键进行搜索。当autofocus出现两次以上的时候,浏览器会选择最后一个带有autofocus属性的输入框input聚焦。

x-webkit-speech:webkit核的浏览器(如Chrome)特有的语音识别工具,使用x-webkit-speech后,在输入框的右侧会出现一个小话筒,点击话筒,会提示“请开始说话”,用户可以通过麦克风输入语音,浏览器会自动识别语音内容,并将识别的结果显示在输入框中。

以前需要借助一大段Javascript代码来实现的聚焦和输入光标移开输入框的交互效果,而使用HTML5则只需要设置几个属性一切就OK了。

CSS

单单只是设置属性和实现功能还不够,我们可以用CSS3来对搜索框进行美化,让它更有亲和力。

.search_form{position:relative; height:31px; margin:60px;display:inline-block;} .search_form:hover{-webkit-box-shadow:0 0 3px #999;-moz-box-shadow:0 0 3px #999} .sinput{float:left; width:200px; height:21px; line-height:21px; padding:4px 7px; color:b3b3b3; border:1px solid #999; border-radius:2px 0 0 2px; background-color:#fbfbfb;} .sbtn{float:left; width:50px; height:31px; padding:0 12px; margin-left:-1px; border-radius:0 2px 2px 0; border:1px solid #4d90fe; background-color:#4d90fe; cursor:pointer; display:inline-block; font-size:12px; vertical-align:middle; color:#f3f7fc;position:absolute;} .sbtn:hover{background:#4084f2}

我们使用CSS3给搜索框设置鼠标滑上去的阴影效果,输入框圆角效果,搜索按钮鼠标滑上的效果。当然,为了兼容其他浏览器您可能还要在CSS上进行一些处理,就如同本站helloweba的搜索框。

感谢各位的阅读,以上就是“利用HTML5+CSS3打造支持语音输入的搜索框”的内容了,经过本文的学习后,相信大家对利用HTML5+CSS3打造支持语音输入的搜索框这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联网站建设公司,,小编将为大家推送更多相关知识点的文章,欢迎关注!


网站栏目:利用HTML5+CSS3打造支持语音输入的搜索框-创新互联
网页URL:http://pwwzsj.com/article/ceedco.html