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

极客行天下 2013-05-03 09:28:07
就像支付宝帐号输入那样,当在文本框中输入银行卡号时,会在文本框上方显示放大的输入文字。
...全文
371 4 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
更正下findNode,有空白节点会死循序
function findNode(o) { var p = o.previousSibling; do { if (p.className == 'note') return p; } while (p = p.previousSibling); }
  • 打赏
  • 举报
回复
<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>
极客行天下 2013-05-03
  • 打赏
  • 举报
回复
最好有具体实现的代码,我是想用在asp.net下GridView控件中,其中的模板列中部署有文本框,希望在这里实现我想要的效果。
functionsub 2013-05-03
  • 打赏
  • 举报
回复
创建一个div层,定位在input上面,input绑定keyup事件,将input内容放到div层里面去。

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧