使用 Jquery/Javascript (Mobiscroll) 在移动设备上隐藏虚拟键盘答案

【问题标题】：Hide virtual keyboard on mobile with Jquery/Javascript (Mobiscroll)使用 Jquery/Javascript (Mobiscroll) 在移动设备上隐藏虚拟键盘
【发布时间】：2014-09-14 11:50:58
【问题描述】：

关于这个有很多问题。但是他们都在谈论将重点放在一个领域上。这是我的问题：

我有一个输入类型字段。当用户点击它时，它将打开我的自定义 mobiscroll 功能。在某些情况下，例如 Android 2.* 或 Windows Surface 平板电脑，它也会显示虚拟键盘！我如何编写一个虚拟键盘永远不会出现的案例！

谁能帮帮我:)

【问题讨论】：

标签： javascript jquery keyboard virtual mobiscroll

【解决方案1】：

要移除键盘，您需要将焦点移到活动元素上。没有其他解决方案。

所以显示您的弹出窗口并在移除焦点后。

例子：

function clickInput() {
    openPopUp();
    document.activeElement.blur(); // lose focus on the active element and hide keyboard
}

更新：

我不知道“mobiscroll”。但是要隐藏键盘，您需要失去对活动元素的关注。

document.activeElement && document.activeElement.blur();
// This code remove the keyboard constantly.

【讨论】：

也许我的弹出文本是个坏主意。因为我使用的是mobiscroll。这就像一个会自动打开的输入类型。我已经编辑了我的问题
感谢 R3tep ！ blur() 函数毕竟有帮助。正是结合使用 mobiscroll 和模糊效果！

【解决方案2】：

模糊是我的问题的关键！ Mobiscroll 有一个名为 onBeforeShow 的方法，该方法在 mobiscroll 出现之前被调用。在这种方法中，我在输入类型上使用了 blur() 我在上使用了 mobiscroll！我的代码如下：

var options = {
        preset: this.preset,
        theme: 'wp light',
        mode: 'scroller',
        display: 'bottom',
        timeWheels: "HHii",
        dateFormat: "dd-mm-yy",
        timeFormat: "HH:ii",
        lang: 'nl', // TODO: Deduce from application language.
        onBeforeShow: (html, inst) => { this.findControl().blur();}
    };
    this.findControl().mobiscroll(options);

【讨论】：

【解决方案3】：

Blur 是 Android 上的关键，但禁用父级是 WinJS 上的关键。

var control = jQuery("#someControl");
// Disabling the parent prevents the keyboard to popup for WinJS.
control.parent().prop('disabled', true);
var options = {
    preset: this.preset,
    mode: 'scroller',
    display: 'bottom',
    timeWheels: "HHii",
    dateFormat: "dd-mm-yy",
    timeFormat: "HH:ii",
    lang: 'nl',
    onBeforeShow: function (inst) {
        // Blur the control because Android will otherwise show the keyboard.
        control.blur();
    }
};
control.mobiscroll(options);

【讨论】：