All geek questions in one place

How to hide virtual keyboard for selected item in Win8 JavaScript application?

I am building a Windows 8 application in JavaScript. I have these html elements in markup:

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

When I myField1 on a device without a physical keyboard, a virtual keyboard appears. After that, if I touch the myField2 key, the keyboard will remain in place. But I do not want to have typeahead in this particular <select> field. Is there a way to hide the virtual keyboard by turning it on for <input> fields only?

+6
source share
1 answer

According to the documentation on the touch keyboard, the touch keyboard shows and hides behavior that needs to be consistent across applications - the focus of the user. This is why the show and hide methods are not available in the Windows.UI.ViewManagement.InputPane class .

This white paper with touch keyboard describes the details and causes why the behavior stored on the keyboard during navigation / tabs between input elements was designed in this way.

There is also a set of controls that can receive focus during text but are not editable. Instead of a UI and potentially disorienting the user in the middle of the stream, the touch keyboard remains in the field of view of the controls, because the user is likely to move back and forth between the controls and the text recording by touching the keyboard. Therefore, if the keyboard is already displayed and focuses the earth on controlling 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 if the crane does not land on the editable area.

In general, according to the recommendations - applications should remain with the touch keyboard by default. Think before attempting to change the default behavior.

If you hit a script in which it really looks out of place to have a keyboard, the white paper also gives hints about a workaround (not intended). You can temporarily switch focus to an uneditable item (for example, a button), and the keyboard will disappear. But the select control will skip the tap event due to a program focus shift and require another click to open its drop-down list. Perhaps with great effort, this workaround can be improved. But then again, this is a workaround and should be used wisely.

 _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 should have this button of zero size.

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

Source: https://habr.com/ru/post/947346/

More articles:


All Articles