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