Mottie 虚拟键盘和选择器

Posted 2023-05-09

【中文标题】Mottie 虚拟键盘和选择器

【英文标题】：Mottie virtual keyboard and Chosen Selector

【发布时间】：2015-05-31 15:27:03

【问题描述】：

我正在尝试让以下两个优秀的 jQuery 插件一起工作。

Mottie 的虚拟键盘插件：(github.com/Mottie/Keyboard) 一个名为 Chosen 的选择器在用户键入时过滤选项： （harvesthq.github.io/chosen/）这是我的意思的一个例子（当我使用我的物理键盘时）：chosen auto-filtering while typing with physical keyboard

不幸的是，当我使用 mottie 的键盘时，不会发生这种过滤。这是发生的情况的屏幕截图： chosen auto-filtering while typing with mottie fails

我的 mottie javascript 是：

$('input, textarea').keyboard(layout: 'qwerty', usePreview: false, autoAccept: true).addTyping();

知道为什么吗？大概这两个开发者可以回答这个问题（@mottie）

PS：由于发布图片需要 10 分，所以我将它们作为链接。

【参考方案1】：

您需要使用 select2 open 事件来初始化键盘 (demo)

var keys = 
    bksp: 8,
    tab: 9,
    enter: 13,
    space: 32,
    delete: 46
;

$('select')
    .select2(
        placeholder: "Select a state"
    )
    .on("select2:open", function (e) 
        $('.select2-container--open .select2-search__field').keyboard(
            // Used by jQuery UI position utility
            position: 
                // null = attach to input/textarea;
                // use $(sel) to attach elsewhere
                of: $(document),
                my: 'center bottom',
                at: 'center bottom',
                // used when "usePreview" is false
                at2: 'center bottom'
            ,
            reposition: true,
            usePreview: false,
            change: function(e, keyboard, el) 
                var key = (keyboard.last.key || '').toLowerCase();
                // trigger a keydown for "special" keys
                e.type = keys[key] ? 'keydown' : 'input';
                e.which = keys[key] || key.charCodeAt(0);
                keyboard.$el.trigger(e);
            
        )
        // activate the typing extension
        .addTyping(
            showTyping: true,
            delay: 50
        );
    );

更新：添加了特殊键交互以允许在虚拟键盘上按 Enter 键

包含此 css 以删除蓝色轮廓：

.ui-keyboard-input-current 
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;

【讨论】：

感谢您的回答。我会试试看。