Non-styled input field

by anup1986

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-10">
            <ul class="list-group" data-bind="foreach: items">
                <li class="list-group-item">
                    <div data-bind="visible: !editing()">
                    <p data-bind="text: text, click: $parent.editMode"></p>
                </div>
                    <div data-bind="visible: editing">
                    <input class="plain-input" data-bind="value: text" type="text" autofocus />
                        <button class="btn btn-sm btn-default" data-bind="click: $parent.doneEditing">Done</button>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>

CSS

.plain-input {
    padding: 0;
    border: none;
    z-index: 2;
    box-shadow: none;
}

.plain-input:focus{
    border: none;
    outline: none;
}

JavaScript

var vm = function(){
    var self = this;
    self.items = ko.observableArray([
        { text: ko.observable('Cras justo odio'), editing: ko.observable(false) },
        { text: ko.observable('Dapibus ac facilisis in'), editing: ko.observable(false) },
        { text: ko.observable('Morbi leo risus'), editing: ko.observable(false) },
        { text: ko.observable('Porta ac consectetur ac'), editing: ko.observable(false) },
        { text: ko.observable('Vestibulum at eros'), editing: ko.observable(false) }]);
    
    self.editMode = function(item){
        if (!item.editing())
            item.editing(true);
    };
    
    self.doneEditing = function(item){
        item.editing(false);
    };
}

ko.applyBindings(new vm());