enterkey handler for knockout + jquery

by Rupesh Kokal

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js"></script>
<div id="form1" data-bind="enterkey: submit1">
    <table>
        <tr>
            <td>Name</td>
            <td>
                <input type=text name="name" />
            </td>
        </tr>
        <tr>
            <td>Address</td>
            <td>
                <input type=text name="address" />
            </td>
        </tr>
        <tr>
            <td>State</td>
            <td>
                <select name="state">
                    <option value="ME">Maine</option>
                    <option value="NH">New Hampshire</option>
                    <option value="MA">Massachusetts</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <div style="padding: 5px 0 5px 0;"> <a class="button" id="submit1" href="#" data-bind="click: submit1">Save</a>

                </div>
            </td>
        </tr>
    </table>
</div>
<div id="form2" data-bind="enterkey: submit2">
    <table>
        <tr>
            <td>Email</td>
            <td>
                <input type="text" name="email" />
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <div style="padding: 5px 0 5px 0;"> <a id="submit2" class="button" href="#" data-bind="click: submit2">Save</a>

                </div>
            </td>
        </tr>
    </table>
</div>

CSS

body {
    font-family: Helvetica, Arial
}
input[type=text] {
    width: 200px;
}
td:first-child:not(:last-child) {
    font-weight: bold;
}
a.button {
    clear: both;
    padding: 10px;
    background: #0000ff;
    color: #ffffff;
    text-decoration: none;
}
a.button.selected {
    background: #ff0000;
}
}

JavaScript

function flash(el) {

    el.addClass('selected');
    window.setTimeout(function () {
        el.removeClass('selected');
    }, 200);
}

var model = {
    submit1: function () {
        flash($('#submit1'));
        console.log("Save 1 clicked");
    },
    submit2: function () {
        flash($('#submit2'));
        console.log("Save 2 clicked");
    }
};

/* the enterkey extender */

ko.bindingHandlers.enterkey = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var inputSelector = 'input,textarea,select';
        $(document).on('keypress', inputSelector, function (e) {
            var allBindings = allBindingsAccessor();
            $(element).on('keypress', 'input, textarea, select', function (e) {
                var keyCode = e.which || e.keyCode;
                if (keyCode !== 13) {
                    return true;
                }

                var target = e.target;
                target.blur();

                allBindings.enterkey.call(viewModel, viewModel, target, element);

                return false;
            });
        });
    }
};

ko.applyBindings(model);