HTML5為輸入框添加語音輸入功能的實現(xiàn)方法

這里介紹的是大家以后要用到的html強大功能,可直接給輸入框增加語音功能,下面我們先來看看實現(xiàn)方法。
大家可以看到在輸入框右邊的麥克風(fēng)圖標(biāo),點擊麥克風(fēng)就能夠進行語音識別了。
其實很簡單,語音識別是html5的基本功能,它的用法是
<input type=”text” speech x-webkit-speech />
如果喜歡XHTML類似的語法,可以這樣表示
<input type=”text” x-webkit-speech=”x-webkit-speech” />
語音識別在十年前是讓人覺得不可思議的事情,即便是前些年,網(wǎng)頁上的語音識別也只能使用其他方式實現(xiàn),比如使用Flashplayer等等。不過現(xiàn)在,獲取語音只需要簡單的給輸入框加入一個屬性標(biāo)簽,就能夠進行識別了。
移動設(shè)備如手機上的瀏覽器,只要支持html5,同樣也應(yīng)該支持語音識別。試試你的Android瀏覽這個網(wǎng)頁?
另外,如果想用javascript獲取語音識別這個事件的結(jié)束,可以使用onwebkitspeechchange
<input type=”text” speech x-webkit-speech onwebkitspeechchange=”alert(this.value)” />
以上所述是小編給大家介紹的HTML5為輸入框添加語音輸入功能的實現(xiàn)方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
- HTML5搜索輸入框下拉列表代碼是一款在搜索框里面輸入問題下拉顯示更多信息。需要的朋友可以來腳本之家下載2020-04-22
html5實現(xiàn)輸入框字?jǐn)?shù)限制提示抖動效果
html5實現(xiàn)輸入框字?jǐn)?shù)限制提示抖動效果,效果圖為藍色背景,輸入文字時并伴有橫條加載效果,當(dāng)超過限制字符時,輸入框抖動效果代碼。本段代碼可以在各個網(wǎng)頁使用,有需要的2018-03-01Html5新標(biāo)簽datalist實現(xiàn)輸入框與后臺數(shù)據(jù)庫數(shù)據(jù)的動態(tài)匹配
HTML5新增的標(biāo)簽datalist實現(xiàn)輸入中文/拼音首字母時,自動進入數(shù)據(jù)庫模糊查詢,并返回相應(yīng)的結(jié)果,生成datalist,由于在輸入框中的輸入內(nèi)容發(fā)生變化時,datalist會自動觸發(fā)2017-05-18- 本文主要介紹了HTML5 虛擬鍵盤出現(xiàn)擋住輸入框的解決辦法。具有很好的參考價值,下面跟著小編一起來看下吧2017-02-14
- 這篇文章主要介紹了HTML5輸入框下拉菜單功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2020-09-08