Статьи

31 день Windows 8 для HTML5 | День № 15: Экранная клавиатура

Эта статья является Днем № 15 в серии под названием 31 Дней Windows 8 . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти дополнительные ресурсы, загрузки и исходный код на нашем сайте .

advertisementsample


Сегодня мы собираемся взглянуть на экранную клавиатуру в Windows 8. Похоже, что Microsoft не проводит различий в именах между клавиатурой, которая появляется, когда вы нажимаете пальцем на элемент управления вводом, и той, которую можно найти в Центр легкого доступа. Сегодня мы сосредоточимся на клавиатуре, которая выглядит следующим образом:

15-XAML-NormalKeyboard

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

15-XAML-EaseOfAccessCenter

И нажмите кнопку «Начать экранную клавиатуру». Вы обнаружите клавиатуру, которая выглядит следующим образом:

15-XAML-EaseOfAccessKeyboard

Основная задача этой клавиатуры — дать пользователю возможность полностью использовать Windows, не подключая клавиатуру к своему компьютеру. Он не настраивается и не отвечает ни на какой код, который мы собираемся написать в этой статье. Эта клавиатура также является одним из единственных окон, которые можно разместить поверх начального экрана. Проверь это:

15-XAML-OnScreenKeyboardStartScreen

Итак, первые несколько абзацев этой статьи я провел, говоря о клавиатуре, которая НЕ является предметом этой статьи.  Зачем?   Есть две причины:

  • Если вы используете не сенсорное устройство при работе с этой статьей (или в своем собственном приложении и хотите использовать функции обычной сенсорной клавиатуры), вы обнаружите, что щелчки мыши не запускают сенсорную клавиатуру на вашем компьютере. машина. Таким образом, вы будете искать в Интернете решение, чтобы оно появилось.
  • Когда вы будете искать по сети в поисках дополнительной информации о манипулировании экранной клавиатурой в Windows 8, вы получите множество статей о Ease of Access, что, вероятно, не то, что вы хотели. Если вы найдете соответствующую статью о том, как включить сенсорную клавиатуру, скорее всего, именно эту, потому что я не смог найти способ заставить эту работу работать.

Основная причина этого заключается в том, что Windows 8 один из немногих различий между щелчком мыши и касанием пальца. Если вы щелкнете мышью по полю ввода, Windows 8 предполагает, что вы используете настоящую клавиатуру, даже если вы используете сенсорный компьютер. Однако прикосновение пальца произведет ту клавиатуру, о которой мы будем говорить сегодня.

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

15-XAML-SimulatorTapButton

Хорошо, теперь, когда мы получили все это, давайте начнем эту настоящую статью.

Использование экранной клавиатуры

Во-первых, давайте посмотрим на стандартные состояния экранной клавиатуры, к которым пользователь может перемещаться в любое время, когда клавиатура открыта. Мы видели стандартное представление QWERTY ранее:

15-XAML-NormalKeyboard

Но есть еще несколько. Когда мы создаем приложение, наша главная задача, прежде всего, должна состоять в том, чтобы сделать задачи, которые пользователь должен выполнить, как можно проще. (Это у вас на уме, верно?) С этой целью экранной клавиатурой можно манипулировать, чтобы это произошло. Наш элемент ввода уже некоторое время имел это представление о типе . В HTML5 мы представили ряд новых типов, таких как datetime, email и многое другое. Этот тип атрибута активирует соответствующую клавиатуру для задачи под рукой. Если тип не указан, будет отображаться обычная клавиатура. Вот как выглядит код:

<input type="number" value="1234" />

Когда вы начнете играть с атрибутом type, вы обнаружите, что существует большое количество типов, на самом деле 23. Теперь эти 23 типа ввода не все применимы при смене клавиатуры. Например, тип datetime не предоставит вам другую клавиатуру, отличную от стандартной клавиатуры. Давайте посмотрим, как эти типы ввода могут изменить раскладку клавиатуры.

Стандартная раскладка клавиатуры

<input type="color" value="color"/>
<input type="date" value="date"/>
<input type="datetime" value="datetime"/>
<input type="datetime-local" value="datetime-local"/>
<input type="month" value="month"/>
<input type="text" value="text"/>
<input type="time" value="time"/>
<input type="week" value="week"/>

15-XAML-NormalKeyboard

Клавиатура поиска

<input type="search" value="search"/>

Введите ключевые изменения для поиска.

15-XAML-Search

Электронное письмо

<input type="email" value="email"/>

Добавлены кнопки «@» и «.com», уменьшен пробел

образ

URL

<input type="url" value="url"/>

Добавлены кнопки «/» и «.com», маленькая клавиша пробела, клавиша «Go»

15-XAML-адрес

Цифровая клавиатура

<input type="number" value="1234567890"/>
<input type="tel" value="111-111-1111"/>

15-XAML-Number

пароль

<input type="password" value="password"/>

Добавлена ​​кнопка Скрыть клавишу

образ

другие

  • type = ”file” вызывает средство выбора файлов
  • type = ”hidden” скрывает это, что еще
  • type = [«radio»] или [«range»] или [«reset»] или [«submit»] вызывает нативно выглядящий элемент управления

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

Заглавные буквы

15-XAML-CAPS

Emoji ( на самом деле есть 30 страниц эмодзи, нажмите здесь, чтобы увидеть их все )

15-XAML-эмодзи

Символы (второй набор символов после набора, показанного с помощью цифровой клавиатуры)

15-XAML-Символы2

Split Keyboard (выбор пользователя, эта клавиатура оптимизирована для набора текста)

15-XAML-SplitKeyboard

Inking Keyboard (эта клавиатура распознает рукописный текст)

15-XAML-InkingKeyboard

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

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

Резюме

Сегодня мы рассмотрели различные клавиатуры, доступные нашим пользователям. Мы можем использовать типы ввода для отображения правильной клавиатуры в нужное время. Кроме того, мы узнали, что есть 30 полных страниц символов Emoji, которые также можно использовать . (Если это не очевидно, мы также получим большую пользу от написания этих статей!)

Если вы хотите увидеть работающее приложение, которое использует все типы ввода, щелкните значок загрузки ниже:

downloadHTML

Завтра мы собираемся углубиться в использование контекстных меню для сбора данных, как в нашем приложении, так и из кнопок в нашем элементе управления AppBar. Увидимся позже!

downloadTheTools

Вот этот огромный список Emoji, на случай, если вы забыли нажать на него.