Focusd Demo Page

Focus and unfocus on various elements on this page to see how Focusd works.

Default (everything)

In this section, everything that has received focus will be outlined in red.

Links Form elements Contenteditable elements Tabindex-enabled element:

Google

Facebook

Edit me!

Click/tap me to focus.

Code

$('#everything').focusd();

Links only

In this section, links that has received focus will have an orange background.

Links Form elements Contenteditable elements Tabindex-enabled element:

Google

Facebook

Edit me!

Click/tap me to focus.

Code

$('#linksonly').focusd({ elementGroups: ['links'] });

Forms and contenteditables

In this section, all forms and contenteditable elements that has received focus will be outlined in green. In addition, the focusd elements will receive a class of filled instead of the default class "focusd".

Links Form elements Contenteditable elements Tabindex-enabled element:

Google

Facebook

Edit me!

Click/tap me to focus.

Code

$('#formsAndEditables').focusd({
    elementGroups: ['forms', 'contenteditables'],
    classname: 'filled'
});