【问题标题】:Mottie virtual keyboard and Chosen SelectorMottie 虚拟键盘和选择器
【发布时间】: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 分,所以我将它们作为链接。

【问题讨论】:

    标签: javascript jquery jquery-plugins jquery-selectors virtual-keyboard


    【解决方案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;
    }
    

    【讨论】:

    • 感谢您的回答。我会试试看。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多