Перейти к содержимому


Клавиатура В Мобильной Версии

мобильная версия клавиатура

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 8

#1 like.hornet.6

like.hornet.6

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 02 Октябрь 2015 - 09:00

Есть ли возможность в мобильной версии сайта для блоков, где нужно вносить только цифры (номер телефона, количество товаров, номер квартиры, индекс и прочие) сделать вывод цифровой клавиатуры.
То есть, когда вы на своём смартфоне на платформе Android/iOS/WP нажимаете на поле ввода индекса или номера телефона, то вам выводят клавиатуру следующего типа:

1359981090_img-07.png    или  1359981131_img-06.png   или  menu_kb.jpg

Лично по себе замечал, что сайты и приложения, которые требуют ввести цифры, и при этом выводят сразу клавиатуры с цифрами - мне они очень нравятся и Я их неосознанно запоминаю (они облегчают жизнь, так сказать=)).

Модераторы, каким образом осуществить вывод данной клавиатуры на мобильной версии сайта для блока ввода телефона (к примеру).

Спасибо.

#2 like.hornet.6

like.hornet.6

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 03 Октябрь 2015 - 15:07

Прошу прощения, данная клава работает на сайте, но только не на всех блоках. При вводе количества товаров, индекса почтового всё норм, Я даже рад очень.
Единственное - при вводе номера телефона буквенная клавиатура выползает, цифровая почему-то не хочет сразу.
Что поменять можно в классе ввода (или как это называется), чтобы и при вводе телефона была цифровая клава.

#3 like.hornet.6

like.hornet.6

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 07 Октябрь 2015 - 01:23

Так как же сделать, чтобы в мобильной версии сайта при вводе номера телефона выводилась сразу цифровая клавиатура?

#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 27 Октябрь 2015 - 05:00

В шаблоне Быстрый заказ найдите:
<input placeholder="Для оперативной связи с вами и согласования заказа" id="sites_client_phone" name="form[contact][phone]" value="{ORDER_FORM_CONTACT_PHONE}" maxlength="255" class="required input-text" type="text"/>

замените на:
<input placeholder="Для оперативной связи с вами и согласования заказа" id="sites_client_phone" name="form[contact][phone]" value="{ORDER_FORM_CONTACT_PHONE}" maxlength="255" class="required input-text" type="tel"/>

Проверьте работу данного поля для ввода телефона в устройстве.

#5 like.hornet.6

like.hornet.6

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 30 Октябрь 2015 - 22:10

Просмотр сообщенияVaccina (27 Октябрь 2015 - 05:00) писал:

В шаблоне Быстрый заказ найдите:
<input placeholder="Для оперативной связи с вами и согласования заказа" id="sites_client_phone" name="form[contact][phone]" value="{ORDER_FORM_CONTACT_PHONE}" maxlength="255" class="required input-text" type="text"/>

замените на:
<input placeholder="Для оперативной связи с вами и согласования заказа" id="sites_client_phone" name="form[contact][phone]" value="{ORDER_FORM_CONTACT_PHONE}" maxlength="255" class="required input-text" type="tel"/>

Проверьте работу данного поля для ввода телефона в устройстве.

С телефона всё прекрасно работает, только и в версии для ПК поле изменилось (длинна и вид - закругления на углах добавились).
Есть ли возможность сделать версию для ПК с обычным полем и версию для мобильных с полем как получилось сейчас?

И спасибо за ответ - очень удобно со смартфона вводить.

#6 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 31 Октябрь 2015 - 02:17

Из-за изменения типа поля некоторые стили слетели, в main.css найдите:
#quickform input[type="text"], #quickform input[type="number"], #quickform input[type=phone], #quickform input[type=email], #quickform input[type=password] {
  width: 96%;
  height: 30px;
  border: 1px solid gray;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  text-align: left;
}

замените на:
#quickform input[type="text"], #quickform input[type="tel"], #quickform input[type="number"], #quickform input[type=phone], #quickform input[type=email], #quickform input[type=password] {
  width: 96%;
  height: 30px;
  border: 1px solid gray;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  text-align: left;
}


#7 like.hornet.6

like.hornet.6

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 02 Ноябрь 2015 - 16:17

Просмотр сообщенияVaccina (31 Октябрь 2015 - 02:17) писал:

Из-за изменения типа поля некоторые стили слетели, в main.css найдите:
#quickform input[type="text"], #quickform input[type="number"], #quickform input[type=phone], #quickform input[type=email], #quickform input[type=password] {
width: 96%;
height: 30px;
border: 1px solid gray;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
text-align: left;
}

замените на:
#quickform input[type="text"], #quickform input[type="tel"], #quickform input[type="number"], #quickform input[type=phone], #quickform input[type=email], #quickform input[type=password] {
width: 96%;
height: 30px;
border: 1px solid gray;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
text-align: left;
}

Эврика! Всё отлично в версии для ПК.

А ещё небольшой вопрос: можно ли поменять в мобильной версии сайта размер поля ввода номера телефона, чтобы оно выглядело таким же по длине, как и поле для имени и e-maila? А то оно сейчас уже и короче, не вписывается в общий стиль, так сказать...

#8 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 02 Ноябрь 2015 - 16:46

Просмотр сообщенияlike.hornet.6 (02 Ноябрь 2015 - 16:17) писал:

Эврика! Всё отлично в версии для ПК.

А ещё небольшой вопрос: можно ли поменять в мобильной версии сайта размер поля ввода номера телефона, чтобы оно выглядело таким же по длине, как и поле для имени и e-maila? А то оно сейчас уже и короче, не вписывается в общий стиль, так сказать...
Здравствуйте.
В main.css найдите код
#content #sites_client_mail, #content #sites_client_pass, #content #reg_name {
	min-height: 30px;
	width: 94%;
}
и замените на
#content #sites_client_mail, #content #sites_client_pass, #content #reg_name {
	min-height: 30px;
	width: 96%;
}


#9 like.hornet.6

like.hornet.6

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 186 сообщений
  • ГородРостов-на-Дону

Отправлено 03 Ноябрь 2015 - 14:40

Просмотр сообщенияDanil (02 Ноябрь 2015 - 16:46) писал:

Здравствуйте.
В main.css найдите код
#content #sites_client_mail, #content #sites_client_pass, #content #reg_name {
min-height: 30px;
width: 94%;
}
и замените на
#content #sites_client_mail, #content #sites_client_pass, #content #reg_name {
min-height: 30px;
width: 96%;
}

Теперь выглядит потрясающе!





Темы с аналогичным тегами мобильная, версия, клавиатура

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных