如何在Win8 JavaScript应用程序中隐藏选择元素的虚拟键盘？ [英] How do I hide virtual keyboard for select element in Win8 JavaScript app?
问题描述
我正在使用JavaScript创建Windows 8应用程序。我在标记中有这些html元素：
I'm creating a Windows 8 application in JavaScript. I have these html elements in the 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>
当我在设备上点击 myField1 时物理键盘，虚拟键盘出现。之后，如果我点击 myField2 ，键盘仍然就位。但我不想在这个特定的< select> 字段中进行预先输入。有没有办法为它隐藏虚拟键盘，仅为< input> 字段启用它？
When I tap myField1 on the device without physical keyboard, virtual keyboard appears. After that if I tap on the myField2, the keyboard remains in place. But I don't want to have typeahead in this particular <select> field. Is there a way to hide the virtual keyboard for it, enabling it only for <input> fields?
推荐答案
根据触摸键盘文档，触摸键盘显示和隐藏行为旨在使应用程序保持一致 - 保持用户的关注。这就是 Windows.UI.ViewManagement.InputPane类。
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需要这个零大小的按钮。
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>
这篇关于如何在Win8 JavaScript应用程序中隐藏选择元素的虚拟键盘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
