www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need to remove or overwrite form focus

  1. #1
    Join Date
    Nov 2007
    Posts
    22

    Need to remove or overwrite form focus

    I have a Wordpress based website (Divi theme) and have added a provided registration form.

    Unfortunately the code provided (quite lengthy Javascript files) must adding a 'focus' or 'autofocus' to one of the form fields because if I open a page with the form at the foot of the page on a laptop or mobile device, the page opens and displays at the foot of the page where the form is - and not at the top of the page with logo, menus etc...

    There are no immediate obvious focus codes added to the form fields themselves, so must be hidden in the accompanying Javascript files. They are not easy to read.

    Basically I am looking for a piece of code I can add to my Wordpress theme to overwrite any form field focus so that the form displays from the top of the page on every page??

    Thanks!!

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,760
    1. JQuery is not JavaScript
    2. This can be done in HTML

    You use the tabindex attribute to dictate the next field that the caret moves to and focus is given to, you do not need JavaScript for this as the browser does this through the markup (HTML)
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Nov 2007
    Posts
    22
    Thanks for the reply

    So I can apply to a tabindex to an element at the top of the page, and the browser by default will initially display the page to that element (i.e. if I added a tabindex to a menu at the top of the page, or logo)?

    Due to the complex nature of this particular Wordpress theme I was hoping for a piece of code I could add to the header or footer of every page but I will try this.

    Thanks again

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,760
    You write the tabindex as an attribute in the HTML of the element that you want to have focus of the caret after a tab key press.

    So, you have a couple of inputs...
    HTML Code:
    <input name="username" type="text" value="" tabindex="1000" required>
    <input name="email" type="email" value="" tabindex="1001" required>
    <input name="password" type="password" value="" tabindex="1002" required>
    The tab key when prerssed will go to the inputs in turn, so if the second item has the tab index of 1002 and the last item had tab index of 1001, then the caret would move to the last item after the first and then to the second from the third
    eg...
    HTML Code:
    <input name="username" type="text" value="" tabindex="1000" required>
    <input name="email" type="email" value="" tabindex="1002" required>
    <input name="password" type="password" value="" tabindex="1001" required>
    So the tabindex allows you to tell the browser what you want doen with the focus on inputs.

    In your comments, which were hard to follow, you were on about a menu? For static elements that are not inputs, you can not easily focus non linkable or non fillable elements, so as long as the menu item is a proper link, you can apply a tabindex to that element but you can't add a tab index to something lik a div or a p tag as they are output elements not input elements.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Nov 2007
    Posts
    22
    Thanks for your reply.

    Unfortunately though I don't think I have explained the problem very well in my original post. I was going to provide URLs but the website is slightly adult in theme and didn't want to post here.

    OK - so hopefully this may make things clearer:

    - The page in question has a form at the foot of the page just above the footer;

    - When I visit or open this page on either a laptop or mobile phone the display I first see is the form at the bottom of the page - not the top of the page where the logo and menu is (like every other website on the internet). I can scroll up manually to the top of the page, but the initial view displayed to the user is the form at the bottom of the page. I don't want it to do this. I want the user to see the top of the page first;

    - I'm using a Wordpress theme and a provided form from an affiliate company. Therefore I haven't coded either. Before the form was added the initial display the user saw was the top of the page (like almost every other website), so I know there is some code in the form and accompanying Javascript files that came with the form that must be telling the browser to display the form first (and I assumed it was a focus element). I just can't find it;

    - I don't want to give the form 'focus' so that it displays first, and this post wasn't to put a tab order for the form fields;

    - I can't find the code itself causing the browser to display the form first at the foot of the page, so was hoping there was some code I could add to 'overwrite' or perhaps that I could add to the footer of every page that when the browser reads the form code to display the form first - it would then reach the code on the footer to take the display back to the top of the page;


    I have really tried explaining this the best I can without visuals.

    Thanks again for your help
    Last edited by cc976a; 01-06-2018 at 10:07 AM.

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,760
    A form does not have focus automatically set as most people go to a form and click in to the first cell in any case.

    So your form can be anywhere and your page loads up like any other site.

    The best way to do this is as explained, physically written in to the page, using javascript can be messy because not all browsers will read javascript, some have it disabled and since the Spectre and Meltdown CPU hacks that have the potential to leak personal information through use of javascript in a web browser, I think that the pool of users with javascript enabled browsers will be shrinking while this threat exists.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center

"

"