Dynamic placeholders w/ html5

css.css

input {
    font-family:Courier;
    padding:8px;
    font-size:16px;
    width:50%;
}

input::-webkit-input-placeholder {
    color:    #ddd;
    font-style:italic;
}
input:-moz-placeholder {
    color:    #ddd;
    font-style:italic;
}

input span {
    color:red;
}

label {
    color:#ddd;
    font-family:Courier;
    font-size:16px;
    z-index:20;
    font-style:italic;
}
​

html.html

<input name="email" id="target" type="text" placeholder="[email protected]"/>
<label id="email-label" for="email"></label>
​

js.js

$(function() {
  return $("#target").keyup(function(e) {
    var code, el, f, offset, p, temp, w;
    el = $(this);
    p = el.attr("placeholder");
    temp = p.split("email")[1];
      
    if (el.val().indexOf("@") > -1 && el.val().indexOf(".") > -1 && el.val().lastIndexOf(".") > el.val().indexOf("@")) {
      temp = "";
    }
    
    code = e.keyCode;
      
    if (code === 8 && el.val().length < 1) {
        return $("#email-label").html("").css("margin-left", "0px");
    }
      
    if (code == 64) {
      temp = (temp === "" ? "" : temp.split("@")[1]);
    }
    if (el.val().indexOf("@") > -1) {
      temp = (temp === "" ? "" : "." + temp.split(".")[1]);
    }
    if (code === 46) {
      temp = "";
    }
    
    offset = el.val().length;
    w = el.width();
    f = 9.5;
    offset = -w + offset * f;
    return $("#email-label").html(temp).css("margin-left", offset + "px");
  });
});​