如何实现文本框放大镜功能？

Question

就像支付宝帐号输入那样，当在文本框中输入银行卡号时，会在文本框上方显示放大的输入文字。文本框放大镜

Answer 1

创建一个div层，定位在input上面，input绑定keyup事件，将input内容放到div层里面去。

Answer 2

最好有具体实现的代码，我是想用在asp.net下GridView控件中，其中的模板列中部署有文本框，希望在这里实现我想要的效果。

Answer 3

<br /><br /><br /><br /><br /><br /><br /><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) { do { var p = o.previousSibling; if (p.className == 'note') return p; } while (p); }
    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>

Answer 4

更正下findNode，有空白节点会死循序
function findNode(o) { var p = o.previousSibling; do { if (p.className == 'note') return p; } while (p = p.previousSibling); }