模仿淘宝文本框内容放大效果

<br /><br />
<style type="text/css">
div.input{position:relative;width:230px;}
div.input input{width:100%;border:solid 1px #0077ff}
div.input div.note{display:none;position:absolute;top:-30px;height:28px;width:100%;line-height:30px;font-size:20px;background:#fffdca;border:solid 1px #facf66;color:Red}
</style>
<script type="text/javascript">
    function findNode(o) { var p = o.previousSibling; do { if (p.className == 'note') return p; } while (p = p.previousSibling); }
    function checknote(o, blur) {
        if (blur) findNode(o).style.display = 'none';
        else {
            var n = findNode(o);
            n.innerHTML = o.value;
            n.style.display = o.value.length == 0 ? 'none' : 'block';
        }
    }
</script>
<div class="input"><div class="note"></div><input type="text" onblur="checknote(this,true)" onfocus="checknote(this)" onkeyup="checknote(this)" /></div>
<br /><br />
<div class="input">
<div class="note"></div>
<input type="text" onblur="checknote(this,true)" onfocus="checknote(this)" onkeyup="checknote(this)" /></div>