• Resolved Billy Wilcosky

    (@wilcosky)


    Cause: Contact Form X global Enter handler
    In the bundled JavaScript there is this handler:

    $(document.body).on('keypress', function(e) { if (e.which == 13) { if (!$('#cfx-message').is(':focus')) contactFormXSubmit(e); }});

    What it does:
    Listens for Enter (keyCode/which 13) on document.body
    If the focus is not on #cfx-message, it calls contactFormXSubmit(e)
    contactFormXSubmit() calls e.preventDefault() at the start
    So Enter is intercepted for the whole page whenever you are not focused on the CFX message field.

    Effect:
    In the search overlay (#overlay-search-input): pressing Enter triggers this handler instead of submitting the search form.
    In other forms (login, registration, etc.): same behavior.
    The only time Enter behaves normally is when focus is on #cfx-message.

    Fix (in the Contact Form X plugin)
    The logic should only run when the user is in the contact form, not everywhere else. For example:
    // Only handle Enter when user is inside the contact form$(document.body).on('keypress', function(e) { if (e.which == 13) { var $target = $(e.target); // Only intercept if we're in a cfx form field (but not the message textarea) if ($target.closest('.cfx-form, #cfx').length && !$target.is('#cfx-message')) { contactFormXSubmit(e); } }});

    Or, more conservatively, only run when the event originates inside the contact form:
    if (e.which == 13) { var $target = $(e.target); if ($target.closest('#cfx, .cfx-form').length && !$target.is('#cfx-message')) { contactFormXSubmit(e); }}
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Billy Wilcosky

    (@wilcosky)

    To be clear, the plugin breaks submit on enter site-wide. So for example, I cannot press enter to search using my theme’s search field.

    Plugin Author Jeff Starr

    (@specialk)

    Thanks for reporting. I will get this fixed up asap.

    PS: Is there any *functional* difference between the two code examples you posted? They look like they do the same thing.

    Thread Starter Billy Wilcosky

    (@wilcosky)

    Thanks! Ignore the first code example. This is what I ended up using and it works well.
    Line 27 – 31 of frontend.js:

    		$(document.body).on('keypress', function(e) {
    if (e.which == 13) {
    if ($(e.target).closest('#cfx').length && !$('#cfx-message').is(':focus')) contactFormXSubmit(e);
    }
    });

    Enter is now handled only when the keypress comes from inside the Contact Form X form (#cfx); but still not inside the message box so you can use enter there without the form submitting.

    Plugin Author Jeff Starr

    (@specialk)

    Thank you, this is added in v3.0.1 of CFX. I appreciate your feedback and code.

Viewing 4 replies - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.