Maison > interface Web > Tutoriel H5 > le corps du texte

Recherche vocale HTML5 (recherche vocale du magasin Taobao)_compétences du didacticiel HTML5

WBOY
Libérer: 2016-05-16 15:50:33
original
2104 Les gens l'ont consulté
Html5 prend en charge la recherche vocale Malheureusement, elle ne peut être utilisée que par les navigateurs dotés du noyau Webkit. L'utilisation est très simple. Il vous suffit d'ajouter l'attribut x-webkit-speech à l'entrée. L'exemple est le suivant :
.

De cette façon, il y aura un "petit microphone" sur le côté droit de votre zone de saisie, qui vous avertira lorsque vous cliquerez dessus

À ce moment-là, dites-le simplement et reconnaissez-le, comme par exemple la recherche vocale dans la boutique Taobao :


Autres attributs de la saisie vocale : lang est le type de langue

Vous pouvez contrôler le type de langue du discours dans la zone de saisie, par exemple

Actuellement connu, il s'agit uniquement de onwebkitspeechchange. Comme son nom l'indique, il s'agit d'un événement déclenché lorsque la voix change. Généralement, il peut être soumis sous la forme Après avoir dit cela, la recherche sera automatique.
x-webkit-grammar : Ce n'est pas un attribut pour la recherche vocale, mais il peut contrôler la grammaire d'entrée. Par exemple, lors de la création d'un champ de recherche, vous pouvez utiliser x-webkit-grammar:

Rendez le contenu de la saisie vocale aussi proche que possible du contenu de la recherche et supprimez les caractères redondants, tels que "的".

Faisons un petit exemple pour le tester :

Copiez le code
Le code est le suivant :





< /body>


效果如下:
<img alt="" src="http://files.jb51.net/file_images/article/201301/2013010310294631.png">
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal