How to set default functionality to all text boxes in one form

Question

I did my research online and did not find appropriate answer.

<ui:define>
    <h:form id="formName"> 
        <h:inputText id="p1"/>
        <h:inputText id="p2"/>
        <h:inputText id="p3"/>
        <h:inputText id="p4"/>
    </h:form>
</ui:define>

<ui:define name="javascripts">      
    <script type="text/javascript">
        //<![CDATA[
        $(document).on('opened','[data-reveal]',function() {
            $("#formName input:text").on('keyup keypress', function(e) {
                var code = e.keyCode || e.which;
                if (code == 13) {                                                                       
                    e.preventDefault();
                    return false;
                }
            }); 
        }

My question is for all these input text from id p1 to p4 , I have to disable enter key. Instead of writing KeyPress events for each of these Id's, how to make it neat code?

Aside from the missing closing bracket your code looks fine. You could arguably remove the `return false;` and just leave the `preventDefault()`. Do you have a specific issue with it? — Rory McCrossan, Aug 10 '15 at 16:12
When I write logs for testing, it is not even going in that keyup or keypress function. I think they way I am trying to access those input text is wrong. — ashlesha, Aug 10 '15 at 16:16
where is this `opened` event being triggered? And is it being triggered? Does form exist when it is triggered? Not much information provided here — charlietfl, Aug 10 '15 at 16:17
@ashlesha can you try `$('#formName').on('keyup keypress', function(e) { var code = e.keyCode || e.which; if (code == 13) { e.preventDefault(); return false; } });`? — Sushil, Aug 10 '15 at 16:41
you can also try `$("form :input").on("keypress", function(e) { return e.keyCode != 13; });` check this fiddle http://jsfiddle.net/bcjLxpzs/ — Sushil, Aug 10 '15 at 16:44
@Sushil , this is disabling enter key on all the fields in the form. I want in specific to h:inputText only — ashlesha, Aug 10 '15 at 16:44
great @ashlesha. let me post this as a solution then. please upvote it and mark it as an answer if it helped you. — Sushil, Aug 10 '15 at 16:49
posted my solution @ashlesha. please upvote it and mark it as an answer if it helped you. — Sushil, Aug 10 '15 at 16:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/86634/discussion-between-sushil-and-ashlesha). — Sushil, Aug 10 '15 at 16:55

Sushil · Accepted Answer · 2015-08-10T17:04:27.760

1

you can use the following code to disable form submit on enter key for input fields

EDIT

as suggested by @dognose, you should use keyup or keydown as keypress may not be supported by all the browsers.

$("form :input").on("keyup keydown keypress", function(e) {
    console.log(e.keyCode);
    return e.keyCode != 13;
});

check this updated JSFIDDLE. hope this helps.

edited Aug 10 '15 at 17:04

answered Aug 10 '15 at 16:51

Sushil

2,837
4
21
29

You should use `keydown` or `keyup`. `keypress` is not triggered for control keys in various browsers, which might lead to unexpected results. – dognose Aug 10 '15 at 16:58
thanks @dognose. let me edit my answer. – Sushil Aug 10 '15 at 17:00
Some information on this: http://javascript.info/tutorial/keyboard-events *Keydown triggers on any key press and gives scan-code. Keypress triggers after keydown and gives char-code, but it is guaranteed for character keys only.* – dognose Aug 10 '15 at 17:04
updated my answer. thanks for the info @dognose. – Sushil Aug 10 '15 at 17:05
thanks @ashlesha. glad was able to help you. – Sushil Aug 10 '15 at 20:10

How to set default functionality to all text boxes in one form

1 Answers1