WordPress.org

Forums

Calculated Fields Form
[resolved] how to focus curser inside first field box? (19 posts)

  1. sallam
    Member
    Posted 1 year ago #

    Greetings

    How do I make the curser focus inside the first input field box, so that its ready for user's input?
    And does keyboard 'tab' key works for moving the curser to the next field?

    https://wordpress.org/plugins/calculated-fields-form/

  2. codepeople
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    I've just made an update to automatically focus the first field of the form.

    Please re-download and overwrite the plugin to apply the update (it's a minor update, the version number is the same).

    If you prefer you can just overwrite the modified file "js/fbuilder-pro-public.jquery.js", the modification was added at line #164.

    The tab key continue working as usual.

    Thank you for your feedback!

  3. sallam
    Member
    Posted 1 year ago #

    Thanks very much.
    Unfortunately, the update not just focuses the cursor in the first field, it also makes the page loads at the area where that field is. This is not desired, because it skips everything at the top of the web page. This takes away the chance of any ads from being noticed!

    Can it focus but leaves the page start at the top as usual please?

  4. codepeople
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    New update made, this time it should keep the page position when placing the focus in the field. Please re-download and overwrite the plugin and let me know any comments.

    Thank you!

  5. sallam
    Member
    Posted 1 year ago #

    I did update again, but now the forms are not working, no focus, no styling, no zeros and no calculations.

  6. codepeople
    Member
    Plugin Author

    Posted 1 year ago #

    I don't experience that problem in my local copies, could you send me the address of the page that contains the form to check that problem in detail?

    If you prefer you can send the address of the form in a private ticket (it's free) at http://wordpress.dwbooster.com/support

  7. sallam
    Member
    Posted 1 year ago #

  8. sallam
    Member
    Posted 1 year ago #

    Could you please give me a link to where I can download your plugin before the focus update?

  9. sallam
    Member
    Posted 1 year ago #

    I have uploaded the js file you mentioned in your first reply.
    Is this the line?
    $("#fieldlist"+opt.identifier+" .pb0").find(".field")[0].focus();
    I've temporarily removed the .focus part:
    $("#fieldlist"+opt.identifier+" .pb0").find(".field")[0];

    Waiting for your solution for a focus without going down the page..

  10. codepeople
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    Sorry for the late, I've been testing the new code in detail, please download the new version here:

    http://wordpress.dwbooster.com/uploads/files/calculated-fields-form.zip

    That version includes the focus solution without going to down the page.

    I'll be also uploading this new code to the WordPress directory in the few hours.

    I'll appreciate any feedback about the new feature.

    Thank you!

  11. sallam
    Member
    Posted 1 year ago #

    Sorry for being late.
    I've uploaded the new updated plugin. Worked like a charm!
    Excellent. Thanks so very much indeed.

  12. wolfdenoir
    Member
    Posted 9 months ago #

    Hello, I am wondering if there is a way to disable the cursor from going to the form altogether. While your code does prevent the page from scrolling. The moment the user press any key it jumps to the form content on our front page.

    We are also finding that on iPhones it seems to jump to the form on load or when the user taps anywhere on the page for the first time after loading.

    I have located your function in the file "js/fbuilder-pro-public.jquery.js"

    focusWithoutScrolling($("#fieldlist"+opt.identifier+" .pb0").find(".field"));

    By commenting out the code I was able to fix the issue. However I am wondering perhaps in future versions you can incorporate a switch for users to selectively choose which forms to have automatic focus? Just a thought. Thanks a lot for creating this awesome plugin!

  13. codepeople
    Member
    Plugin Author

    Posted 9 months ago #

    Hi,

    Yes, thank you very much. I will check the implications of change in the code and update the online version of the plugin.

    Best regards.

  14. sallam
    Member
    Posted 6 months ago #

    I've just updated the plugin today, and the focus of the curser in no longer working.
    Could you please re-apply it and update the new version?

  15. codepeople
    Member
    Plugin Author

    Posted 6 months ago #

    Hi,

    I've tested the latest update, and the focus with the fields is working as the previous version:

    The form does not receive the focus by default, but if your form has multiple pages, and you press the next or previous buttons, the focus is assigned, dynamically, to the first field in the active page.

    Best regards.

  16. sallam
    Member
    Posted 6 months ago #

    So if my form is only 1 page it doesn't get a focus?
    If so, how can I edit the code so that it does please?

  17. codepeople
    Member
    Plugin Author

    Posted 6 months ago #

    Hi,

    The behavior that set the focus to the first field in a form was removed because in pages where the form is not displayed in the first viewport, in some browsers the page is scrolled dynamically to the form, and the users don't see the top of page. But if you want include this behavior in your form, please follow the steps below:

    1. Open the "/wp-content/plugins/calculated-fields-form/js/fbuilder-pro-public.jquery.js" file with the text editor your choice.

    2. Go to the snippet of code:

    $("#fieldlist"+opt.identifier+" .pbreak:not(.pb0)").find(".field").addClass("ignorepb");

    and paste the following code just below it:

    focusWithoutScrolling = function(el){
    if( el.length )
    {
    el = el[0];
    var x = $(window).scrollLeft(), y = $(window).scrollTop();
    if( !/date/.test( el.id ) ) el.focus();
    setTimeout( function(){ window.scrollTo(x,y); }, 0 );
    }
    };
    focusWithoutScrolling($("#fieldlist"+opt.identifier+" .pb0").find(".field"));

    Best regards.

  18. sallam
    Member
    Posted 6 months ago #

    Thanks. It worked exactly as I wanted.
    Just a question:
    I'm using an instruct.text field as a reset button for the forms:

    <input type="reset" value="Reset All Fields" />
    It works fine, but the focus is gone of course.
    Is there a code that I can use to bring the focus back to the first field when I press the reset button too?

  19. codepeople
    Member
    Plugin Author

    Posted 6 months ago #

    Hi,

    Not really, in this case you should set the focus in the corresponding field.

    Best regards.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Calculated Fields Form
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.