Primefaces SelectOneMenu 在按下 ctrl+key（热键）时选择项目

Question

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

问题是，当按下组合键且焦点位于<p:selectOneMenu> 字段时，会选择第一个以S 开头的项目（如下示例），然后提交表单。

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

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

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

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

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

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

Answer 1

我从 SVN 存储库中查看了更新版本的 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;
            }
        });
    }
});

Answer 2

升级到 Primefaces 5.1.9（如果您不是 ELITE 客户，则升级到 5.2）修复了 CTRL、ALT 和 SHIFT 的问题。

5.0 分支在 5.0.16 中包含此修复

这里是 Releasenot：http://blog.primefaces.org/?p=3415

这是门票：https://code.google.com/p/primefaces/issues/detail?id=7892