Клавиатура только цифры android

Особенности атрибута inputmode для мобильных ОС и браузеров

Привет, Хабр! Представляю вашему вниманию перевод статьи «Everything You Ever Wanted to Know About inputmode» Christian Oliff.

Примечание переводчика: Первоначальное название статьи «Всё, что вы когда-либо хотели знать об inputmode» изменено на «Особенности атрибута inputmode для мобильных ОС и браузеров», так как второе точнее передаёт суть.

Глобальный атрибут inputmode подсказывает браузерам для устройств с экранной клавиатурой, какой вариант демонстрировать, когда пользователь выбрал элемент input или textarea.

В отличие от изменения type формы, inputmode не меняет способа, которым браузер интерпретирует input – он даёт браузеру инструкцию, какую клавиатуру вывести на экран.

У атрибута inputmode долгая история, но лишь совсем недавно он был принят ведущими мобильными браузерами: Сафари для iOS и Хром для Android. Раньше он был воплощён в жизнь в Firefox для Андроида в 2012 году, но впоследствии, через несколько месяцев, удалён (хотя всё ещё доступен через флаг). Спустя почти шесть лет, Хром для Андроида встроил это свойство, и с последним релизом iOS 12.2, Сафари его тоже поддерживает.

Поддержку атрибута браузерами можно посмотреть здесь. Цифры означают версию браузера.

Прежде, чем мы углубимся в суть дела, следует иметь в виду, что WHATWG living standard предоставляет документацию inputmode, тогда как W3C 5.2 spec больше не содержит её. Так как WHATWG документирует атрибут, и браузеры работают над его поддержкой, мы будем рассматривать технические характеристики WHATWG как стандарт.
Inputmode принимает несколько значений. Давайте рассмотрим их по очереди.

Начнем с него, так как, возможно, нам не понадобится никакая клавиатура. Использование inputmode=”none” не будет показывать клавиатуру в Хроме для Андроид. iOS 12.2 будет выводить по умолчанию свою алфавитно-цифровую клавиатуру, таким образом, характеристика none в этом случае могла бы быть для iOS чем-то вроде сброса настроек.

#Numeric

Это, возможно, одно из самых распространённых значений inputmode, так как оно идеально для полей ввода, которые требуют только чисел – например, пин-коды, почтовые индексы, номера кредитных карт, и т.д. Использование numeric с type=”text” может иметь больше смысла, чем переключение ввода на type=”number”, потому что inputmode=”numeric” может использоваться с атрибутами maxlength, minlength и pattern, делая его более универсальным для разных случаев.

Я часто видел сайты, применяющие type=«tel» в инпуте, чтобы вывести цифровую клавиатуру. Это рассматривается, как обходной путь, но семантически не является корректным.

Помните, что inputmode поддерживает атрибут pattern, мы можем добавить pattern=”\d*” к input для того же эффекта. Используйте это, если вы уверены, что инпут должен позволять вводить только цифры, потому что Андроид (в отличие от iOS) не разрешает пользователю обращаться к клавиатуре с буквами, что могло бы случайно помешать ввести валидные данные.

Введение телефонного номера с помощью стандартной алфавитно-цифровой клавиатуры может вызывать трудности. На телефонной клавиатуре каждая кнопка с цифрой (кроме 1 и 0) представляет три буквы (например, 2 представляет А, В и С), которые расположены на той же клавише. Алфавитно-цифровая клавиатура не ссылается на эти буквы, так что декодирование телефонного номера, содержащего буквы (например, 1-800-COLLECT) требует дополнительных ресурсов.

Использование inputmode с переключением на tel выведет стандартную телефонную клавиатуру, включая кнопки для цифр от 0 до 9, символы решётки и звёздочки. Плюс у нас будут алфавитные мнемонические символы (например АВС).

#Decimal

Поле inputmode с переключением на decimal приводит к небольшим изменениям для iOS, где клавиатура выглядит так же, как и в случае tel, но знаки +*# заменяются десятичной точкой. Андроид будет просто использовать цифровую клавиатуру.

#Email

Я уверен, что вы заполняли форму, которая требует введения электронного адреса, что вынуждало к переключению клавиатуры только лишь для доступа к символу @. Это не смертельно, но конечно, не слишком удобно. Вот где пригодится значение email. Оно добавляет символ @ и десятичную точку.

Такая клавиатура может быть полезной для тех, кому необходимо ввести имя пользователя в Твиттере, так как @ — основной символ для идентификации пользователей в этой соцсети. Другая причина употребления может быть, если у вас есть собственный скрипт для проверки email, и вы не хотите использовать встроенную в браузер функцию валидации.

Значение URL позволяет проще всего добавить расширение имени домена (например, .com) путём нажатия одной кнопки; также присутствуют кнопки, которые обычно используются для веб-адресов, например, символы (.) и (/). Расширение, показанное на клавиатуре, прибавляется к записи пользователя.

Такая клавиатура может быть полезной, чтобы показать юзерам, что ваше поле ввода принимает доменные имена (site.com) а также полные доменные адреса (https://site.com).
Используйте type=”url”, если ваше поле ввода требует валидации введённых символов.

#Search

Это значение выводит голубую кнопку Go на iOS и зелёную Enter на Андроиде, обе на месте Return. Как вы, возможно, догадались по названию, search используется для форм поиска, предоставляя клавишу для производства запроса.

Если вы хотели бы показать Search вместо Enter в iOS и иконку с увеличительным стеклом на Андроиде вместо зелёной стрелки, используйте type=”search”.

Источник

Как добавить строку с цифрами в клавиатуре Gboard Android

Вас не раздражает, что в клавиатуре Gboard не показывается ряд с цифрами? И когда необходимо вводить цифры, то приходится либо вызывать их долгим нажатием на буквах, либо переключаться на цифровую клавиатуру. Но есть хорошие новости: Google ввела ряд с цифрами в последнем обновлении Gboard клавиатуры.

Есть несколько причин, по которым желательно включить строку с цифрами на телефоне. Например если Ваша работа связана с цифрами и Вы часто используете телефон для работы, то было бы удобно всегда иметь перед глазами панель с цифрами.

Итак, если Вы готовы добавить панель с цифрами в клавиатуре Gboard и потратить на это немного времени, то приступим.

Для начала убедитесь, что у Вас установлена последняя версия Google клавиатуры, которая теперь называется Gboard. Затем откройте настройки Gboard. Если Вы использовали нашу инструкцию по добавлению настроек Google клавиатуры в меню приложений, то после обновление они также останутся в этом меню, только клавиатура будет называться Gboard.

Если Вы не добавили настройки клавиатуры в меню приложений, то не волнуйтесь. Просто откройте любое приложение где требуется ввод с клавиатуры (например СМС) и нажмите и удерживайте кнопку слева от пробела.

Нажмите на значок шестеренки и в появившемся меню нажмите на «Настройки клавиатуры Gboard».

Далее нажмите «Настройки».

В разделе «Клавиши» найдите пункт «Число строк». Передвиньте переключатель в положение «Включено».

Теперь строка с цифрами всегда будет присутствовать в клавиатуре Gboard. Легко, правда? Но если Вам надоест эта «лишняя» строка, то Вы всегда сможете ее отключить в настройках.

Источник

7 лучших клавиатур Android с числовой строкой

Набирать числа вместе со словами на программной клавиатуре — непростая задача. Как правило, вы будете долго нажимать на буквы, чтобы ввести число. Или вы переключаетесь на раскладку цифр на клавиатуре телефона. Однако первый требует много времени, а второй требует переключения несколько раз.

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

Но поддерживает ли это каждая клавиатура Android? Нет. Только некоторые из них достаточно любезны, чтобы иметь числовой ряд. Вот семь таких клавиатур для телефонов Android.

1. Gboard

Если у вас есть телефон под управлением Android, скорее всего, на вашей клавиатуре уже есть ряд цифр. Это потому, что стандартные телефоны Android поставляются с предустановленным Gboard от Google.

Вы можете включить / отключить числовую строку, перейдя в Настройки клавиатуры. В разделе «Настройки» нажмите «Настройки» и включите переключатель для числовой строки.

Gboard — бесплатное приложение, которое можно загрузить на любой телефон. Он известен поддержкой нескольких языков, удивительным предсказанием слов и встроенной функцией поиска Google. Приложение также поддерживает стикеры, GIF-файлы, поиск по смайликам, различные темы для настройки и многое другое.

Цена: Свободно

Размер: 75 МБ

2. SwiftKey

SwiftKey — еще одна популярная клавиатура, поддерживающая числовой ряд. Это один из главных конкурентов Gboard, и оба предлагают схожие функции.

Вы получаете поддержку нескольких языков, предсказание смайликов, GIF-файлы, поиск и темы. SwiftKey имеет небольшое преимущество над Gboard, поскольку предлагает собственный буфер обмена. Но если вам больше нравится Gboard, буфер обмена идет к этому тоже. Я предпочитаю SwiftKey по сравнению с Gboard из-за его невероятного предсказания слов и вертикальной прокрутки смайлов.

Чтобы включить числовую строку, перейдите в настройки клавиатуры и нажмите «Ввод». В разделе «Ввод» нажмите «Клавиши» и включите числовую строку.

Также можно включить числовую строку прямо из доступных настроек ярлыка, нажав «Настройки». Приложение также позволяет настроить расположение цифровой клавиатуры на экране макета символов.

Цена: Свободно

Размер: 27 МБ

3. Чрума

Chrooma — это красивое приложение с адаптивной клавиатурой, в котором клавиатура меняет цвет в соответствии с приложением, которое вы используете. Это приложение можно назвать красавицей с мозгами. Это потому, что числовая строка прокручивается, более известная как строка действий.

Когда вы проводите пальцем вправо или влево по строке действий, приложение открывает дополнительные параметры, которые можно настроить в настройках. В нем могут быть кнопки буфера обмена, строка эмодзи, строка слов и строка произвольных букв.

Чтобы включить числовую строку, коснитесь значка настроек на клавиатуре, затем перейдите в «Настройки», а затем «Базовый макет». Включите Action Row.

Затем нажмите «Настроить строку действий» и включите числовую строку и другие параметры по вашему желанию.

Приложение также известно жестами, ночным режимом, настраиваемой быстрой панелью, буфером обмена и корректурой. Вы также получаете GIF-файлы и функцию поиска, которая автоматически ищет весь текст на экране, в отличие от Gboard, где вам нужно вводить поисковый запрос вручную.

Размер: 25 МБ

Цена: Бесплатно с покупками в приложении

4. Клавиатура ai.type

В этом приложении есть все, что вы обычно ищете в приложении для клавиатуры — от предварительно включенной числовой строки до собственного буфера обмена. Приложение также предлагает текстовые ярлыки, клавиши со стрелками, сенсорную панель, эмодзи, несколько языков, автокоррекцию и многое другое. Вы можете настроить как верхний, так и нижний ряд по своему желанию. Когда дело доходит до тем, у вас есть несколько тем, но вы также можете создавать собственные.

Чтобы скрыть числовую строку, нажмите и удерживайте значок с точками справа от числовой строки. Здесь снимите галочку с Numeric. Коснитесь значка, чтобы изменить элементы верхней строки.

Размер: 35 МБ

Цена: Бесплатно с покупками в приложении

5. Грамматическая клавиатура

Вы, должно быть, слышали о Grammarly как об инструменте для проверки грамматики в Интернете. Теперь тот же инструмент доступен как часть его приложения для клавиатуры, известного как Grammarly. Это одна из немногих клавиатур, которые имеют специальный ряд цифр.

Чтобы отобразить числовую строку, откройте Grammarly Settings и нажмите Keyboard Look and Feel. Здесь включите числовую строку.

К сожалению, Grammarly не предлагает столько функций, как вышеперечисленные приложения, и он также ограничен с точки зрения языков. Для тем также есть два варианта: светлый и темный. Но если вы хотите безошибочно писать с помощью числового ряда, Grammarly — ваш помощник.

Размер: 90 МБ

Цена: Свободно

6. Клавиатура TouchPal

Отключенная по умолчанию клавиатура TouchPal позволяет активировать числовую строку, коснувшись логотипа TouchPal на клавиатуре, а затем NumRow Off.

Приложение также предлагает буфер обмена, клавиши со стрелками, смайлики и GIF. Вы также получаете предсказание смайликов и поддержку нескольких языков. По сравнению с Gboard и SwiftKey недостатком является то, что в приложении есть реклама. Чтобы удалить их, вам нужно переключиться на премиум-версию, которая также дает преимущества платных тем и облачного прогнозирования.

Размер: 40 МБ

Цена: Бесплатно с рекламой

7. AnySoftKeyboard

AnySoftKeyboard — это небольшая клавиатура с множеством функций, включая отдельный ряд номеров. Чтобы активировать его, перейдите в Настройки (нажмите и удерживайте значок эмодзи), а затем выберите UI (значок цветовой палитры). Нажмите «Настройки и другое» и нажмите «Общая верхняя общая строка». Здесь выберите цифровые клавиши.

Благодаря поддержке жестов клавиатура предоставляет некоторые настройки, такие как уровень громкости, редактор сокращений, настройки энергосбережения и многое другое. Вы даже можете использовать клавиши регулировки громкости для перемещения курсора. Хотя клавиатура не поддерживает GIF, в ней есть интересная функция, которая позволяет скрывать разделы с эмодзи.

Размер: 5 МБ

Цена: Свободно

Пусть говорят числа

Надеюсь, вам понравились клавиатуры. Попробуйте все и посмотрите, какой из них соответствует вашим требованиям. Как упоминалось ранее, я предпочитаю использовать SwiftKey, потому что в нем есть все, что мне нужно на клавиатуре, включая буфер обмена. Дайте нам знать и свой любимый.

Далее: любите смайлики и гифки? Посмотрите эти 5 приложений для клавиатуры, разработанные для поклонников смайликов и GIF.

Источник