Type Over Text jQuery Plugin

by Trevor Dixon

HTML

<span class="text">Type over me</span>

CSS

.text {
    font-family: sans-serif;
    font-size: 24px;
}

.type-over {
    position: relative;
    color: #ccc;
    display: inline-block;
    padding: 5px;
}

.type-over-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    border: none;
    margin: 0;
    padding: 0;
    padding-left: inherit;
    padding-right: inherit;
}

.type-over-input:focus {
    outline: 1px solid #ccc;
}

JavaScript

$.fn.typeOverText = function() {
    var $ = jQuery,
        $this = $(this);
    
    $this.addClass('type-over');
    $this.append('<input type="text" class="type-over-input">');
    
    return $this;
}

$('.text').typeOverText();