JSFiddle - React, Tailwind, and code Playground

by anup1986

HTML

<div>
    <b>Key up</b>
    <input id="textField" type="text" data-bind="value: keyup, valueUpdate: 'keyup', event: { keypress: onEnter }, hasfocus: focusOne"></input>
    <br />
    <b>Key press</b>
    <input type="text" data-bind="value: keypress, valueUpdate: 'keypress', event: { keypress: onEnter }, hasfocus: focusThree">
    </input>
    <br />
    <b>afterkeydown</b>
    <input type="text" data-bind="value: afterkeydown, valueUpdate: 'afterkeydown', event: { keypress: onEnter }, hasfocus: focusTwo" />
</div>
<br />
<b>Key up</b>
<div id="output" data-bind="text: keyup"></div>
<b>Key press</b>
<div data-bind="text: keypress"></div>
<b>afterkeydown</b>
<div data-bind="text: afterkeydown"></div>
<br />
<b>Result:</b>
<div data-bind="text: result"></div>

JavaScript

var ViewModel = function() {
    this.keyup = ko.observable('')
    this.afterkeydown = ko.observable('');
    this.keypress = ko.observable('');
    this.result = ko.observable('');
    
    this.focusOne = ko.observable(true);
    this.focusTwo = ko.observable(false);
    this.focusThree = ko.observable(false);
    
    this.onEnter = function(){
        var keyCode = (event.which ? event.which : event.keyCode);
            if (keyCode !== 13) return true;
        
        if(this.focusOne() && this.keyup()) {
            this.result(this.keyup());
            this.keyup('');
        }
        
        if (this.focusTwo() && this.afterkeydown()){
         this.result(this.afterkeydown());
            this.afterkeydown('');
        }
        
        if (this.focusThree() && this.keypress()){
            this.result(this.keypress());
            this.keypress('');
        }
        
        return false;
    };
};

ko.applyBindings(new ViewModel());