Magic Text

by Wray Bowling

HTML

<div class="list-item">
<span class="highlight"></span>
<textarea class="input"></textarea>
<textarea class="output"></textarea>
</div>

CSS

*{
    margin:0;
    padding:0;
    border:0;
    font-size:13px;
    font-family: Podkova;
    letters-spacing:0.5em;
    line-height:1em;
    outline: auto 2px rgba(255,0,0,0.25);
}

body{
    padding:20px;
}

.list-item{
    width:400px;
    position:relative;
}

.list-item .highlight, .list-item textarea{
    position:absolute;
    width:100%;
    height:8em;
    white-space:pre-wrap;
    word-wrap:break-word;
}

textarea{
    background-color:transparent;
    resize: none;
    padding:4px;
}

textarea, .highlight{
    position:absolute;
}

.highlight{
    color:red;
    padding:4px;
}

.highlight b{
    background-color:rgba(0,20,0,0.5);
}

.input{
    color:rgba(0,255,0,0.5);
}

.output{
    top:140px;
    color:red;
}

JavaScript

$('textarea.input').live('keyup',function(event){
    var $input = $(this).val();
    var $output = $(this).next('.output').val();
    
    // filter people
    var regex_person = /\@[a-z]+/gi;
    var people = $input.match(regex_person);
    var people_text = "";
    if(people){
        for(var i=0; i<people.length; i++){
            people_text += '<span class="person">' + people[i] + '</span>';
        }
    }
    $('.output').val( people_text );
    
    $('.highlight').html( $input );
   // $('.output').val( $('.highlight').html() );
});