Disable keyboard

by anup1986

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/Keyboard/css/keyboard.css">
<script src="http://mottie.github.com/Keyboard/js/jquery.keyboard.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-push-3">
            <div class="keyboard-sticker"></div>
            <div class="form-group">
                <div class="col-xs-2">
                    <label for="in1">Text:</label>
                </div>
                <div class="col-xs-9 col-xs-push-1">
                    <input class="form-control" data-bind="keyboard: { val: val1 }, value: val1" id="in1" type="text" />
                    <p class="input-style" data-bind="text: val1"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-2">
            <p id="text"></p>
        </div>
    </div>
</div>

CSS

body {
    margin-top: 200px;
}
p.input-style {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.keyboard-sticker{
    position: absolute;
    margin-left: 1px;
    left: 50%;
    top: 75px;
    width: 2px;
    height: 1px;
    background: #000;
}

JavaScript

ko.bindingHandlers.keyboard = {
        init: function (element, valueAccessor) {
            var value = ko.unwrap(valueAccessor()).value,
                type = $(element).attr('type');

            $(element).keyboard({
                lockInput: true,
                layout: type === 'text' ? 'qwerty' : 'customNumPad',
                position: {
                    of: $('.keyboard-sticker'),
                    my: 'center left',
                    at: 'center top',
                    collision: 'fit fit'
                },
                customLayout: type === 'text' ?  null : getNumberLayout(),
                css: {
                    // input & preview
                    input: 'form-control input-sm',
                    // keyboard container
                    container: 'center-block dropdown-menu', // jumbotron
                    // default state
                    buttonDefault: 'btn btn-default',
                    // hovered button
                    buttonHover: 'btn-primary',
                    // Action keys (e.g. Accept, Cancel, Tab, etc);
                    // this replaces "actionClass" option
                    buttonAction: 'active',
                    // used when disabling the decimal button {dec}
                    // when a decimal exists in the input area
                    buttonDisabled: 'disabled'
                },
                accepted: function (e, keyboard, el) {
                    value(el.value);
                }
            });
        },
        update: function (element, valueAccessor) {
            $(element).focus(function () {
                $(this).blur();
            });
        }
    };

    function getNumberLayout() {
        var numPad = {
            'default': [
                '7 8 9',
                '4 5 6',
                '1 2 3',
                '0 {bksp}',
                '{accept} {cancel}'
            ]
        };

        return numPad;
    };

var vm = function () {
    var self...