ansaurus

Question

JSF: SelectOneRadio shortcuts for options

Answer 1

+2 A:

That's not by default builtin. Your best resort is using JavaScript. Attach a function to the keypress event of the <body>, check the keyCode of the key pressed and change the selected item of the dropdown accordingly. This is doable in only a few lines using jQuery. Here's an SSCCE, just copy'n'paste'n'run it.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2461588</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
        <script>
            $(document).ready(function() {
                $('body').keypress(function(e) {
                    var index = parseInt(String.fromCharCode(e.keyCode));
                    if (0 < index && index < 10) {
                        $('#dropdown option').eq(index - 1).attr('selected', true);
                    }
                });
            });
        </script>
    </head>
    <body>
        <select id="dropdown">
            <option>option1</option>
            <option>option2</option>
            <option>option3</option>
            <option>option4</option>
            <option>option5</option>
            <option>option6</option>
            <option>option7</option>
            <option>option8</option>
            <option>option9</option>
        </select>
    </body>
</html>

If you want to support 10 or more items, you'll need to maintain a stack of pressed keys, apply it immediately and introduce a timeout to reset the stack (1 second?).

BalusC 2010-03-17 11:22:40

I thought so...I was hoping that somebody knew a weird function in a not common component that could do that for me :D. Thanks for the answer anyway.

pakore 2010-03-17 11:43:47

Remember that you can exclude the generated id from JSF in your form objects. This way it is much easier to use jQuery selectors in JSF. You do that like this <h:form prependId="false">If you want to escape the id's properly in JSF with jQuery, you can use this function:function escapeIdForJQuery(id) { return id.replace(/:/g,"\\:").replace(/\./g,"\\.");}

Shervin 2010-03-23 11:02:21

@Shervin: just escape the colon by backslash in selector. E.g. `$('#formId\:menuId')`.

BalusC 2010-03-23 11:19:53

I think you need double backslash

Shervin 2010-03-24 10:26:52

@Shervin: when you want to represent a backslash itself, yes. But that is here not the case.

BalusC 2010-03-24 11:09:37

Answer 2

+2 A:

You can investigate whether <rich:hotKey> would help. In short, it lets you define keyboard shortcuts, but it may require some jQuery knowledge.

Bozho 2010-03-17 11:49:47

Interesting component.

BalusC 2010-03-17 12:03:11

If I could you vote as valid answer as well I would do it!

pakore 2010-03-18 09:30:43

Answer 3

+1 A:

PrimeFaces hotKey can help as well.

Cagatay Civici 2010-03-23 10:48:00

ansaurus

tags:

views:

answers:

JSF: SelectOneRadio shortcuts for options

related questions