Support » Plugin: Calculated Fields Form » cursor focus

  • Resolved sallam

    (@sallam)


    How do I make the cursor focused inside the first field of the form please, so that users can type in it without having to click inside it?
    Many thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello,

    You simply should insert a “HTML Content” field in the form with the following piece of code as its content:

    <script>fbuilderjQuery(document).one('showHideDepEvent', function(){fbuilderjQuery('#fbuilder :focusable:first').focus()});</script>

    Best regards.

    Thread Starter sallam

    (@sallam)

    Great. many thanks. But it now scrolls the page down to where the first field is. Can it be done so that just the cursor is in the first field without taking the visitor down to it? I want them to read my article text at the top first.

    • This reply was modified 4 years, 9 months ago by sallam.
    Plugin Author codepeople

    (@codepeople)

    Hello @sallam,

    I’m sorry, but that is the common behavior of browser, and in my opinion the right behavior, if an user sets the focus in an input element is because want type something on it, so, the input tag shoud be in the viewport.

    Set the focus in the first element was part of the initial versions of the plugin, but we decide remove it for the same reasons.

    There is an alternative but is not valid in all situations: Set the focus in the element and scroll the page at top, but if your users are like me, that scroll the page with the keyboard, or pressing tap between elements, the browser will be scrolled to display the element with the focus, another possible issue is if your page includes bookmarks, and an user visit directly the section in your webpage:

    http://yourwebsite.com/#your-bookmark

    As you will force scrolling to the begining of webpage the users will never access to the bookmarks directly.

    I’ve described all inconveniences, but it you want move on, the code would be:

    <script>fbuilderjQuery(document).one('showHideDepEvent', function(){fbuilderjQuery('#fbuilder :focusable:first').focus(); fbuilderjQuery('body').scrollTop(0)});</script>

    Best regards.

    Thread Starter sallam

    (@sallam)

    Thanks very much.

    Plugin Author codepeople

    (@codepeople)

    Hello @sallam,

    It has been a pleasure.

    Best regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘cursor focus’ is closed to new replies.