6

我正在用 JavaScript 创建一个 Windows 8 应用程序。我在标记中有这些 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>字段启用它？

4

1 回答 1

7

根据触摸键盘文档，触摸键盘显示和隐藏行为旨在跨应用程序保持一致 - 让用户保持关注。这就是为什么在Windows.UI.ViewManagement.InputPane 类上没有显示和隐藏方法的原因。

这个触摸键盘白皮书描述了细节，并指出了为什么在输入元素之间导航/切换时保持键盘的行为是这样设计的。

还有一组控件可以在文本输入流期间接收焦点但不可编辑。触摸键盘不会不必要地搅动 UI 并可能使用户在流程中间迷失方向，而是保持在控件的视图中，因为用户可能会在控件和使用触摸键盘的文本输入之间来回切换。因此，如果键盘已经显示并且焦点落在以下列表中类型之一的控件上，则键盘将不会隐藏自身。但是，如果键盘尚未显示，它不会显示自己，除非点击落在可编辑区域上。

总之，根据指南 - 应用程序应保留默认触摸键盘。在尝试更改默认行为之前，请三思而后行。

如果您遇到的情况确实不适合使用键盘，则白皮书还提供了解决方法的线索（非预期）。可以以编程方式将焦点暂时放在不可编辑的元素（比如按钮）上，键盘将自行隐藏。但是由于程序化的焦点转移，选择控件将错过点击事件，并且需要再次点击才能打开其下拉菜单。可能需要付出更多努力，才能改进此解决方法。但同样，这是一种解决方法，应该明智地使用。

_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>
于 2013-06-15T05:48:22.963 回答