用html5實現(xiàn)語音搜索框的方法
發(fā)布時間：2014-03-18 13:50:33 作者：佚名 
我要評論
我要評論作為一個專業(yè)的淘寶控，不知道從什么時候開始發(fā)現(xiàn)淘寶上居然還有語音搜索，好吧，因為好奇心作祟還是想一探究竟，不過我想仔細一點的人，都會發(fā)現(xiàn)在只有在webkit內(nèi)核的瀏覽器上有，原因是它只支持webkit內(nèi)核瀏覽器
我們先看下他們的不同顯示。
下面是在火狐下的截圖：
下面這個是在chrome下的截圖：
能猜想到的，就是寫的代碼肯定是不兼容的。不過你會發(fā)現(xiàn)真是比較簡單的，就算你是前端初學(xué)者你也會明白
復(fù)制代碼
代碼如下:<input type="text" class="text" name="test" id="test" x-webkit-speech lang="zh-CN" x-webkit-grammar="bUIltin:search">
其中參數(shù)的意義：
x-webkit-speech：就是讓你的輸入框的右邊出現(xiàn)一個小話筒，有了語音的功能。
lang：則是 強制輸入框里面的語音的語言種類，例如上面寫的 lang="zh-CN"指的是簡體中文。
x-webkit-grammar：指的是語音輸入語法，"builtin:search”值使得語音輸入的內(nèi)容盡量靠近搜索內(nèi)容，去除多余的字符。
注：不過這個硬件方面的兼容性還是有待提高，因為當(dāng)你中英夾雜語音的時候，估計是會狀況百出的。
相關(guān)文章
- 這篇文章主要介紹了HTML實現(xiàn)移動端固定懸浮半透明搜索框的相關(guān)資料,需要的朋友可以參考下2017-10-17
一款html5+css3實現(xiàn)的超酷綠色發(fā)光搜索表單2014-04-22
本文通過實例代碼給大家分享8款純CSS3實現(xiàn)的搜索框功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-14
本范例僅僅使用了CSS3實現(xiàn),無需js代碼,可惜的是不能在ie下使用2013-05-02- 搜索框是我們經(jīng)常見到的網(wǎng)站功能，它的美觀直接影響著網(wǎng)站舒適度，一般我們都會下功夫美化搜索框。2009-12-03
- 今天讓學(xué)生實現(xiàn)一個搜索框的效果，死活做不出來.2009-10-13
基于html css實現(xiàn)帶搜索圖標(biāo)的搜索框功能
這篇文章主要介紹了基于html css實現(xiàn)帶搜索圖標(biāo)的搜索框功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-09
