JSFiddle - React, Tailwind, and code Playground

by rainymaple

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div id="main">
<tr>
    <td>
        <div class="caption">hasfocus</div>
    </td>
    <td>
        <input type="checkbox" data-bind="hasfocus:checkboxHasFocus"/>
        <input type="text" data-bind="hasfocus:textboxHasFocus"/>
        <button 
            data-bind="hasfocus:buttonHasFocus, click: setFocusToCheckbox">set focus to checkbox
        </button>
        <br/>
        <span data-bind="visible: checkboxHasFocus">checkbox has the focus now</span>
        <span data-bind="visible: textboxHasFocus">textbox has the focus now</span>
        <span data-bind="visible: buttonHasFocus">button has the focus now</span>
        </br>
    </td>
    <td>
        <span>checkboxHasFocus: </span><span data-bind="text: checkboxHasFocus"></span><br/>
        <span>textboxHasFocus: </span><span data-bind="text: textboxHasFocus"></span><br/>
        <span>buttonHasFocus: </span><span data-bind="text: buttonHasFocus"></span>
    </td>
</tr>
</div>

CSS

em{font-weight:bold;}
@font-face {
    font-family: 'SansationRegular';
    src: url('../fonts/Sansation_Regular-webfont.eot');
    src: url('../fonts/Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Sansation_Regular-webfont.woff') format('woff'),
         url('../fonts/Sansation_Regular-webfont.ttf') format('truetype'),
         url('../fonts/Sansation_Regular-webfont.svg#SansationRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationLight';
    src: url('../fonts/Sansation_Light-webfont.eot');
    src: url('../fonts/Sansation_Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Sansation_Light-webfont.woff') format('woff'),
         url('../fonts/Sansation_Light-webfont.ttf') format('truetype'),
         url('../fonts/Sansation_Light-webfont.svg#SansationLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationBold';
    src: url('../fonts/Sansation_Bold-webfont.eot');
    src: url('../fonts/Sansation_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Sansation_Bold-webfont.woff') format('woff'),
         url('../fonts/Sansation_Bold-webfont.ttf') format('truetype'),
         url('../fonts/Sansation_Bold-webfont.svg#SansationBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {padding : 10px; }
body, input, select {font: 14px 'Segoe UI', 'SansationRegular', Arial, sans-serif;}
.page {    
}
.showroom {
}
.header 
{
    margin-bottom: 20px;
}
span {
    /*font: 12px 'SansationRegular', 'Segoe UI', Arial, sans-serif;*/
    margin: 0 4px 0 4px;
    color: black;
}
/*
ul li span { 
        float: left;
        width: 40px;
}
*/
.alignedCaption {
        float: left;
        width: 40px;
}
/*.text*/
.textValues {
    margin: 0 4px 0 4px;
    color: rgb(47, 123, 163);
}
.caption {
    /*font: 12px 'SansationBold', 'Segoe...

JavaScript

var my = {}; //my namespace
my.viewmodel = {
    // hasfocus 
    checkboxHasFocus: ko.observable(false),
    textboxHasFocus: ko.observable(false),
    buttonHasFocus: ko.observable(false),
    setFocusToCheckbox: function () {
        this.checkboxHasFocus(true);
        // $("input:checkbox").focus();
    }
};
ko.applyBindings(my.viewmodel);