vendredi 11 mars 2016

Ho to toggle checkbox by pressing space while focused on label having tabindex?

I'm widely using labels associated with checkbox inputs in my html. It allows user to click on the wide label and get what he wants - checkbox toggle. I want to achieve similar behaviour by pressing Space to toggle the checkbox while being focused on the label. To make label focusable I add tabindex="0" to labels. I also don't want checkboxes to be focusable so I add tabindex="-1" to inputs.

Here are two examples, one is using label tag wrapping, another is using for attribute.

<input type="button" value="Click then press tab." /><br/>
<label tabindex="0">Accept terms <input type="checkbox" tabindex="-1"/></label><br/>
<label for="MyCheckbox" tabindex="0">Accept terms</label> <input type="checkbox" id="MyCheckbox" tabindex="-1"/>

I'm interested in a possibility of achieving desired behaviour without any javascript.




Aucun commentaire:

Enregistrer un commentaire