Skipping Over Quill Buttons with Tabs

I am a big fan of Quill. You can add it to your website, and in minutes have rich text capability (like adding links to the Quill website to your text).

I am also a big, dare I say HUGE fan of tabbing when I am filling out forms. By default, Quill controls (like bold, italic, link, etc) accept focus when you tab, so if a user is filling out and tabbing through a form, when they get to the rich text editor they have to (aaahh!) grab their mouse and navigate into the rich text box.

The short answer is to use jQuery to add a tabeindex -1 (do not allow tab focus) to every button within the .ql-toolbar class, like this:

$(“.ql-toolbar”).find(“:button”).attr(‘tabindex’, ‘-1’);

For good measure, here is the complete Quill code that I am using. It also handles tabbing out of the editor (so when you hit tab you go to the next field). Let me know if you know how to make this better. Thanks!

Matt

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s