Html5一句代码制作语音搜索框

HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框

谷歌的网站以及淘宝网搜索框加了语音搜索功能。虽然目前只有webkit内核浏览器支持,如Chrome 11+浏览器,但是相信随着html的普及,绝大多数浏览器会支持此功能。

先上图:

Html5一句代码制作语音搜索框

普通文本框代码:

<input />

支持HTML5语音API的语音识别文本框

<input x-webkit-speech />

Html5一句代码制作语音搜索框

看到没,文本框后面有个麦克风模样的东西

Html5一句代码制作语音搜索框

此时,对着音频输入设备(如耳麦)发出你那或妖娆,或醇厚,或磁性的嗓音,啊~~

Html5一句代码制作语音搜索框

Html5一句代码制作语音搜索框

当然还有一些其他的参数,比如设置语音限制语言种类

<input x-webkit-speech lang=”zh-CN” />

还有设置语音输入语法的参数,这个就比较试用于搜索框。加上这参数后,系统就会自动去掉“的”、“啦”这类无意义的字

<input x-webkit-speech x-webkit-grammar=”bUIltin:search” />

还有一个onwebkitspeechchange的方法,发生在语言识别成功,且文字输入到文本框后触发。

<input x-webkit-speech x-webkit-grammar=”bUIltin:search” />

我觉得所有网站所有的类似搜索的输入框都让他支持HTML5语言识别!

HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>请使用支持HTML5的chrome浏览器体验语音搜索效果。|www.125jz.com</title>
  <style type="text/css">
   .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
   }
  </style>
 </head>
 <body>
  <form action="#" method="get" class="search_form">     <input type="text" name="s" class="sinput"
    placeholder="输入 回车搜索" autofocus x-webkit-speech>      <input type="submit" value="搜索" class="sbtn">
  </form>
 </body>
</html>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/10280.html

(0)
上一篇 2022年3月17日 上午10:43
下一篇 2022年3月19日 上午10:32

99%的人还看了以下文章

  • CSS制作上一页 下一页 页码显示样式

    今天教大家制作页面的上一页 下一页 页码显示样式,效果如图所示。 <!doctype html> <html> <head> <meta charset=”utf-8″> <title>CSS制作上一页 下一页 页码显示样式|www.125jz.com</title> <style…

    2018年7月29日
    3.7K0
  • CSS3动画:@keyframes animation 案例——制作滚动公告

    滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 注释:当动画完成后,动画的状态会回到初始状…

    2019年2月26日
    4.6K0
  • 手把手,永哥教你学会css sprite(雪碧图)技术

    css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。 css sprite优点: 有效减少网站的http请求数量,加…

    2018年2月20日
    4.6K0
  • css布局基础:定位综合练习

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 整体效果图: 效果说明: 1、随着网页向下滚动,当导航到达窗口顶端(t…

    2020年4月4日
    2.5K0
  • 第12课:页面布局(CSS)

    如何为页面实现理想的布局? 你可以使用级联样式表(Cascading Style Sheets,简称CSS)为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识,可以使用我们提供的CSS教程。因此,请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中,它们发挥不同的作用:HTML负责网页的具体内容(结构),而CSS则修饰网…

    2018年1月19日
    1.9K0
  • 纯CSS制作红色网站二级下拉导航菜单

    纯CSS制作红色网站二级下拉导航菜单,代码非常简洁,适合修改后使用,入门就能掌握。 二级下拉导航菜单HTML代码: <nav> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>电影</a> <ul…

    2019年4月17日
    3.2K0

发表回复

登录后才能评论