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

时间:2014-05-16 17:12:36

标签: javascript primefaces keyboard-shortcuts selectonemenu

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

问题是,当按下组合键并且焦点位于<p:selectOneMenu>字段时,将选择以S开头的第一个项目(在示例后面),然后提交表单。

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

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

我已经针对SELECT html元素和&#34;组合框&#34;测试了此行为来自jQuery UI,但它并没有发生。 SelectOneMenu的Primefaces实现是输入字段的不同包装。

我在“PF用户指南”中列出的return falseonkeyup属性中尝试了onkeydown。没有结果。

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

在深入了解PrimeFaces代码之前,我想知道是否有针对此案例的已知解决方法。

2 个答案:

答案 0 :(得分:3)

我从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;
            }
        });
    }
});

答案 1 :(得分:1)

升级到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