JSFiddle - React, Tailwind, and code Playground

by Eric Hynds

HTML

<form>
    <input type="text" />
    <p><input type="radio" id="test-radio" /><label for="test-radio">test</label></p>
    <p><input type="checkbox" id="test-checkbox" /><label for="test-checkbox">test</label></p>
    <p><select><option></option></select></p>
</form>

CSS

p { margin:10px }

JavaScript

/*
webit doesn't give focus to checkboxes or radio buttons when you click on them or on their label.  or at least, the focus event is not fired.  you must tab to gain focus.
*/

$(document).bind("keydown keyup", function(e){
    
    // in webkit, clicking on a label/radio/checkbox logs <body>
    console.log(e.type, e.target);
});

// will only fire when you tab into radio/checkboxes, not if you click on them.
// fires on text inputs and selects, though.
$(":input").bind("focus blur", function(e){
    console.log(e.type, e.target);
});