How do I change the tabindex of Custom Registration Fields?

[kristineds]

KB Article Creation Checklist

• [x] Write initial draft for this KB Article; label this issue draft and either questions or tutorials
• [x] Add required YAML configuration
• [x] Add Tags for this KB Article to the YAML config (see YAML Keys (Explained))
• [x] Edit and finalize draft for publishing (remove draft label, add draft-finalized label)
• [x] Assign Issue to yourself and create Markdown file (remove draft-finalized label, add pending)
• [x] Project Lead: Review and Publish KB Article (remove pending label, add published label)

---

KB Article Published @ s2member.com
:page_with_curl: See: How do I change the tabindex of Custom Registration Fields?

:octocat: View Markdown File | :pencil2: Edit Markdown File

---

[patdumond]

Good article, @kristineds.

You might want to change the wording here:

This can easily be configured even if you are running another conflicting theme/plugin. To change the tabindex of custom registration fields, this could be customized in two ways.

Suggested edit:

You may find this is especially important if you use a theme or plugin that changes any of your forms. You might also find the tab order on your registration forms is "off" simply due to the way the WordPress Core handles the tabindex on page templates. The tabindex of custom registration fiels may be customized in either of the two ways detailed in this article.

You could use a hook that alters the starting tabindex value for Custom Fields. In other words, you can customize the value that s2Member should start counting from when it generates Custom Fields.

Suggested edit:

You can use a hook that alters the starting tabindex value for your custom fields. In other words, you can customize the starting value that s2Member uses when it generates the custom fields on your form. It's also worth noting that you can set tabindex="-1" to exclude a field from the tabbed interaction entirely; i.e., to skip over that field.

I moved the Note to the end of the paragraph to help ensure that it isn't skipped over down under that screenshot.

[raamdev]

Nice article, @kristineds!

When generating custom registration fields for your form, you probably would want to set the tabindex for each field, thus, controlling its tabbing behavior.

s2Member already sets the tabindex, so it's generally not necessary to set/change this. The line above makes it sound like you need to set the tabindex when using Custom Registration/Profile Fields.

I suggest instead saying something like, "s2Member automatically assigns a tabindex value to each Custom Field and the default setting usually works fine, however some themes and/or custom integrations may interfere with the default setting and require that you take control of the tabindex value s2Member assigns to each Custom Field."

---

Also, I would remove the backticks from the title; just say "tabindex" instead of tabindex.

---

Finally, I would put the Using the Other Attributes option section above the Using a Hook section; we usually want to put the easiest option at the top, with the more difficult/complex one at the bottom.

[patdumond]

Good points, Raam.

On Wed, Aug 12, 2015 at 1:44 PM Raam Dev notifications@github.com wrote:

Nice article, @kristineds https://github.com/kristineds!

When generating custom registration fields for your form, you probably would want to set the tabindex for each field, thus, controlling its tabbing behavior.

s2Member already sets the tabindex, so it's generally not necessary to set/change this. The line above makes it sound like you need to set the tabindex when using Custom Registration/Profile Fields.

I suggest instead saying something like, "s2Member automatically assigns a tabindex value to each Custom Field and the default setting usually works fine, however some themes and/or custom integrations may interfere with the default setting and require that you take control of the tabindex value

s2Member assigns to each Custom Field."

Also, I would remove the backticks from the title; just say "tabindex"

instead of tabindex.

Finally, I would put the Using the Other Attributes option section above the Using a Hook section; we usually want to put the easiest option at the top, with the more difficult/complex one at the bottom.

— Reply to this email directly or view it on GitHub https://github.com/websharks/s2member-kb/issues/254#issuecomment-130387319 .

[kristineds]

@patdumond @raamdev Added all your suggested edits. :)

[patdumond]

Looks great, @kristineds, but Raam had suggested removing the backticks from around tabindex (code blocks). Personally, I prefer to backtick things like field-names and attributes even when not used in blocks, but he's the Editor-in-Chief. :)

[raamdev]

@kristineds A few final edits that I made:

Changed How do I change the tabindex of custom registration fields to How do I change the tabindex of Custom Registration Fields.

Changed Using a Hook to Hooking into the Default Starting Value.

Added backticks (code style) around tabindex="-1".

Changed MU plugin to MU-Plugin.

[raamdev]

@kristineds I also used correct tags in the YAML markup; note that tags should be listed using their slugs, not the full name of the tag itself:

Changed:

tags: MU Plugins / Hacks, Registration/Profile Fields, Login/Registration, Pro-Forms

to

tags: mu-plugins-hacks, registration-profile-fields, login-registration, pro-forms

[bridgeport]

This is an interesting KB, but, unless I'm doing something wrong, method 1 doesn't appear to work, as s2member just creates duplicate tabindex attributes, where the first default instance takes precedence:

For example, this is shown in the html source:

tabindex="100" tabindex="550" 

tabindex="550" is the "other attribute" but the browsers I've tried (e.g., Chrome, Firefox) ignore it and uses the default tabindex="100" instead.

Thanks.

[jaswrks]

tabindex="550" is the "other attribute" but the browsers I've tried (e.g., Chrome, Firefox) ignore it and uses the default tabindex="100" instead.

Thanks for the heads up on this. I'm reopening this issue so that we can investigate further.

[jaswrks]

Referencing: http://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/