javascript - Primefaces SelectOneMenu 在按下 ctrl+key(热键)时选择项目

Question

我有一些带有热键的 JSF 表单，例如，CTRL+S 将保存数据。

问题是，当按下组合键并且焦点位于 <p:selectOneMenu> 上时字段，以 S 开头的第一项(以下示例)被选中，然后提交表单。

您可以在 showcase 中重现此行为, 在第一个字段中，按 CTRL+O。至少在 Chrome 中，它会选择第一个选项，然后选择浏览器“打开对话框”。

我希望这个组件在按下特殊键时忽略字母。

我已经针对 SELECT 测试了这种行为来自 jQuery UI 的 html 元素和“组合框”，但它根本不会发生。 SelectOneMenu 的 Primefaces 实现是对输入字段的不同包装。

我试过了 return false在两个onkeyup和 onkeydown PF 用户指南中列出的属性。没有结果。

我还尝试使用 preventDefault() 添加 jQuery 键盘事件监听器和 return false .什么都没有。

在深入研究 PrimeFaces 代码之前，我想知道这种情况是否有已知的解决方法。

Answer 1

我从 SVN 存储库中 check out 了更新版本的 PrimeFaces 源代码。组件中固定了一些Javascript函数。

然后我提取了那些固定函数并将它们放在一个 Javascript 文件中以覆盖原始函数。

代码如下:

/**
 * Fix for selectOneMenu when key is pressed along with CTRL
 */
PrimeFaces.widget.SelectOneMenu = PrimeFaces.widget.SelectOneMenu.extend({

    bindKeyEvents: function() {
        var $this = this;

        this.focusInput.on('keydown.ui-selectonemenu', function(e) {
            var keyCode = $.ui.keyCode,
            key = e.which;

            switch(key) {
                case keyCode.UP:
                case keyCode.LEFT:
                    $this.highlightPrev(e);
                break;

                case keyCode.DOWN:
                case keyCode.RIGHT:
                    $this.highlightNext(e);
                break;

                case keyCode.ENTER:
                case keyCode.NUMPAD_ENTER:
                    $this.handleEnterKey(e);
                break;

                case keyCode.TAB:
                    $this.handleTabKey();
                break;

                case keyCode.ESCAPE:
                    $this.handleEscapeKey(e);
                break;
            }
        })
        .on('keyup.ui-selectonemenu', function(e) {
            var keyCode = $.ui.keyCode,
            key = e.which;
            switch(key) {
                case keyCode.UP:
                case keyCode.LEFT:
                case keyCode.DOWN:
                case keyCode.RIGHT:
                case keyCode.ENTER:
                case keyCode.NUMPAD_ENTER:
                case keyCode.TAB:
                case keyCode.ESCAPE:
                break;

                default:
                    var text = $(this).val(),
                    matchedOptions = null;

                    clearTimeout($this.searchTimer);

                    matchedOptions = $this.options.filter(function() {
                        return $(this).text().toLowerCase().indexOf(text.toLowerCase()) === 0;
                    });

                    if(matchedOptions.length) {
                        var highlightItem = $this.items.eq(matchedOptions.index());
                        if($this.panel.is(':hidden')) {
                            $this.selectItem(highlightItem);
                        }
                        else {
                            $this.highlightItem(highlightItem);
                            PrimeFaces.scrollInView($this.itemsWrapper, highlightItem);
                        }
                    }

                    $this.searchTimer = setTimeout(function(){
                        $this.focusInput.val('');
                    }, 1000);

                break;
            }
        });
    }
});