Question

我正在使用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>字段启用它？

Answer 1

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

这个touch keyboard whitepaper描述了详细信息，并说明了为什么在输入元素之间导航/跳转时保持键盘的行为是这样设计的。

还有一组控件可以在文本中获得焦点入境流程，但不可编辑。而不是不必要地搅动用户界面可能会使用户在流程中迷失方向触摸键盘仍然在控件中查看，因为用户很可能通过触摸在控件和文本输入之间来回切换键盘。因此，如果键盘已经显示并聚焦落在以下列表中的一种类型的控件上，键盘不会隐藏自己。但是，如果键盘不是已经显示，除非水龙头落在上面，否则它不会显示出来可编辑区域。

总之，根据指南 - 应用应保留默认触摸键盘。在尝试更改默认行为之前要认真思考。

如果你遇到一个看起来不太合适的情况，那么白皮书也提供了解决方法的线索（不是故意的）。可以通过编程方式将焦点临时放在不可编辑的元素（比如按钮）上，键盘将自行隐藏。但是由于焦点的程序化转移，选择控件将错过点击事件，并且需要另一个点击来打开其下拉列表。可能需要付出更多努力，这种解决方法可以得到改进。但同样，这是一种解决方法，应该明智地使用。

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

如何在Win8 JavaScript应用程序中隐藏选择元素的虚拟键盘？

1 个答案: