Textpattern: Hacking the Comment Form's Tabindex
One longstanding frustration among Textpattern users has been the choice of the comment form’s default tabindex order as well as the fact that Textpattern does not assign a tabindex value to both the Preview and Submit buttons. Those who habitually tab through form fields have found themselves inexplicably thrown back to the top of the page after tabbing out of the Comments textarea. Make sense? Of course not! A stroke from the Tab key from the Comments box should naturally go to the Preview or Submit button.
I’m no PHP whiz, so this discovery of mine may be a no-brainer to you accomplished coders out there. Still, I resolved to figure the darn thing out on my own and post my findings here. Click those safety belts, here we go!
The existing tabindex order in Textpattern is totally out of wack, as far as I’m concerned. The Comments field is assigned tabindex="1"
which sort of makes sense but creates a potentially confusing tab path. Tabbing out of the Comments field takes you to the Name field, then to Email, and then to URL. After that, you get thrown to the top of the page when logic and usability dictate that a visit to the Preview or Submit button would probably be a more useful next step in the tab order.
Another problem is this: what if you are already using tabindex values in your main navigation, or elsewhere on your page? Should you really have two tabindex="1"
? I think not.
So my goal became to find out where I could change the 4 existing tabindex values to whatever I wanted as well as assigning tabindex values to the Preview and Submit buttons. They need love, too.
The fields’ values are easy enough to find. The Comments field’s tabindex is clearly labeled in the code, and the Name, Email, and URL tabindex values are located at the end of their respective code snippets. From /publish/comments.php (this may be a great time to back up a copy of this file… just in case):
Name:
'comment_name_input' => $namewarn.input('text','name', $name, $isize,'comment_name_input',"1"),
Email:
'comment_email_input' => $emailwarn.input('text','email', $email,$isize,'comment_email_input',"2"),
URL:
'comment_web_input' => input('text','web', $web, $isize,'comment_web_input',"3"),
Comment Field:
$textarea = '<textarea class="txpCommentInputMessage" name="message"'.$msgcols.$msgrows.$msgstyle.' tabindex="4">'.htmlspecialchars($message).'</textarea>';
The tabindex is easy to see, as it’s the only number appearing in these snippets.
The buttons were a bit trickier, but not impossible given enough time to tinker with my trademark Trial and Error Methodology™. The Submit button problem was actually solved by Mary on the TXP Forums:
? fInput('submit','submit',gTxt('submit'),'button')
changes to
fInput('submit','submit',gTxt('submit'),'button','','','','6')
The final piece of the puzzle is the Preview button, which proved to be a slippery little devil. After some truly discouraging results, I finally happened upon the correct syntax:
'comment_preview' => input('submit','preview',gTxt('preview'),'comment_preview','button'),
changes to
'comment_preview' => input('submit','preview',gTxt('preview'),'comment_preview','button','5','',''),
.
So there you have it. Flexible tabindex values for all. This one goes out to Faruk. Hopefully, future releases of Textpattern will free up more control over the comments area and hacks like these will not be necessary. In case my previous post came off a little harsh, let me take this moment to thank the TXP team for a job well done. I’ve had my share of headaches with Textpattern, but it’s never been anything that a little brainpower and the help of a great community couldn’t solve. Peace out.