How do I hide virtual keyboard for select element in Win8 JavaScript app?

Question

I\'m creating a Windows 8 application in JavaScript. I have these html elements in the markup:

&l         


        

Answer 1

As per the touch keyboard documentation, touch keyboard show and hide behavior is designed to be consistent across apps - keeping in focus the user. That is why show and hide methods are not available on the Windows.UI.ViewManagement.InputPane class.

This touch keyboard whitepaper describes the details, and calls out why the behavior to persist the keyboard while navigating/tabbing between input elements has been designed this way.

There is also a set of controls that can receive focus during a text entry flow but that aren't editable. Rather than needlessly churn the UI and potentially disorient the user in the middle of a flow, the touch keyboard remains in view on controls because the user is likely go back and forth between the controls and text entry with the touch keyboard. Therefore, if the keyboard is already showing and focus lands on a control of one of the types in the following list, the keyboard will not hide itself. However, if the keyboard was not already showing, it will not show itself unless the tap lands on an editable region.

In summary, as per the guidelines - apps should stay with the default touch keyboard. Think hard before trying change the default behavior.

If you hit a scenario where it is really looking out of place to have the keyboard, the whitepaper also gives clues for a workaround (not intended). One can put the focus programmatically temporarily on a non-editable element (say button) and the keyboard will hide itself. But the select control will miss the tap event because of programmatic shift of focus, and will require another tap to open its drop-down. May be with more effort, this workaround can be improved. But again, this is a workaround and should be used judiciously.

_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 will need to have this zero size button.

<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>