6644
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Всем привет. Сегодня в поисках интересного материала набрел на сайт в поиске которого работает голосовой поиск ,ну я давай сразу гуглить и нашел статейки как поставить голосовой поиск на сайт.И сейчас мы поставим его себе на сайт.
И так приступим
1.Идем в папку шаблона и открываем файл search.form.tpl
2.Ищем там строчку примерно такую
Код:
<input type="search" placeholder="Поиск…" value="" name="search" />
3.Меняем это поле на вот это изменёное
Код:
<input type="search" placeholder="Поиск…" name="search" x-webkit-speech="" speech=""/>
4. Сохраняем и любуемся голосовым поиском
5.Также можно добавить автоматическое отправление по распознаванию поискового запроса.Это будет выглядеть так
Код:
<input type="search" placeholder="Поиск…" name="search" x-webkit-speech="" speech="" onwebkitspeechchange="this.form.submit();"/>
6.Также можно изменить стиль нашего микрофончика в поле поиска по умолчанию у кнопки такие стили
Код:
input::-webkit-input-speech-button {
-webkit-appearance: -webkit-input-speech-button;
display: inline-block;
} Код:
input::-webkit-input-speech-button {
-webkit-appearance: button;
background: url('../img/mikrofon.png') no-repeat;
width: 10px;
height: 10px
float: right;
} 7.По умолчанию, Google берет данные о языке распознавания исходя из выбранного языка в Google Chrome, но и здесь можно все изменить добавив метатег
Код:
<meta http-equiv='Content-Language' content='ru_RU' />
Можешь почитать и вот эту статейку "красивые закруглённые всплывающие подсказки к формам."
Это тоже интересно
20.03.13HTML теги blockquote- 20.03.13HTML теги body
06.02.14Меню с векторными иконками
14.05.18Облако тегов на CSS3
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.