Как скрыть виртуальную клавиатуру для элемента select в приложении Win8 JavaScript?

Question

Я создаю приложение для Windows 8 на JavaScript. У меня есть эти HTML-элементы в разметке:

<input id="myField1" type="number"></input>
<select id="myField2">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>

Когда я нажимаю myField1 на устройстве без физической клавиатуры появляется виртуальная клавиатура. После этого, если я нажму на myField2Клавиатура остается на месте. Но я не хочу, чтобы напечатать в этом конкретном <select> поле. Есть ли способ скрыть за ней виртуальную клавиатуру, включив ее только для <input> поля?

Answer 1

В соответствии с документацией по сенсорной клавиатуре, сенсорная клавиатура отображает и скрывает поведение, разработанное для обеспечения согласованности между приложениями, сохраняя при этом внимание пользователя. Вот почему методы show и hide недоступны в классе Windows.UI.ViewManagement.InputPane.

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

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

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

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

_initializeEventHandlers: function initializeEventHandlers()
{
    myField2.addEventListener('focus', this._onfocus.bind(this));
},
_onfocus: function onfocus(event)
{
    console.log('on focus invoked');
    if (this._movingFocusInProgress)
    {
        this._movingFocusInProgress = false;
        return;
    }

    this._movingFocusInProgress = true;
    b1.focus();
    WinJS.Promise.timeout(200).then(function ()
    {
        myField2.focus();
    });
},

HTML должен иметь эту кнопку нулевого размера.

<input id="myField1" type="number" />
<select id="myField2" role="banner">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>
<button id="b1" style="visibility:visible; border-width:0;
    border-color:transparent;outline-color:transparent; min-width:0; min-height:0"></button>