Input emulate

by azproduction

HTML

<div value="Pewpew"></div>

CSS

div {
    border: solid 1px #777;
    width: 100px;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    font-family: "Courier New";
}

.focus {
    border-color: blue;
}

.focus:after {
    content: '|';
}

JavaScript

function inputize($element) {
    $element = $($element);
    $element.text($element.attr('value'));    
    $element.click(function () {
        $(this).addClass('focus');        
    });
    $(window).keypress(function (e) {
        if (!$element.hasClass('focus')) {
            return;
        }
        var text = $element.text();
        if (e.which === 8) {
            text = text.slice(0,-1);
        } else {
            text += String.fromCharCode(e.which);
        }
        $element.text(text);
        return false;
    });
}

inputize($('div'));