question

mkpc avatar image
mkpc asked bryanvargas commented

iFrame tab sequence

Hi,

Passing from one field to the other using the keyboard requires two hit on the tab key. Is there a way to prevent this?

In the image below, I was in the credit card number field and then hit tab, we can see the focus is now around the expiration date (dashed border) instead of having the cursor inside the input.

focus1.png


If I hit tab again we can now see that the cursor is correctly in the expiration input and I can start typing something.

focus2.png

This is pretty annoying.

My iframe is based on the code pen from this thread https://community.clover.com/questions/29906/failed-to-find-or-resize-iframe-in-clover-hosted-i.html.

Any idea?


Thanks

ecommerce
focus1.png (7.8 KiB)
focus2.png (7.5 KiB)
3 comments
10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

bryanvargas avatar image bryanvargas ♦♦ commented ·
have you tried to add a tabindex code to the script?
0 Likes 0 ·
mkpc avatar image mkpc bryanvargas ♦♦ commented ·
Hi, unfortunately this is the part where I don't seem to have control since this fields are generated by Clover's iFrame.
0 Likes 0 ·
bryanvargas avatar image bryanvargas ♦♦ mkpc commented ·
You can manipulate the form with CSS and Javascript. We just give an example CSS but you are more than welcome to change the CSS and other things.
0 Likes 0 ·

1 Answer

·
jpalic avatar image
jpalic answered jpalic published

I agree that the double-tabbing required in the iframe is annoying and non-standard and wanted to confirm that this is still an issue.

10 |2000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Welcome to the
Clover Developer Community