<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>文本框放大</title>

<script>

function $(id){

return document.getElementById(id);

}

function showBigInfo(obj){

var bigObj;

if(!$("bigInfo")){

bigObj=document.createElement("span");

bigObj.setAttribute("id","bigInfo");

bigObj.style.position="absolute";

bigObj.style.border="1px solid #F93";

bigObj.style.borderRadius="2px";

bigObj.style.color="red";

bigObj.style.fontSize="26px";

bigObj.style.fontWeight="bold";

bigObj.style.padding="4px";

bigObj.style.display="none";

document.body.appendChild(bigObj);

obj.onblur=function(){

$("bigInfo").style.display="none";

}

obj.onfocus=function(){

$("bigInfo").style.display="block";

}

}else{

bigObj=$("bigInfo");

}

bigObj.style.display="block";

var str="";

var info=obj.value;

for(var i=;i<info.length;i+=){

str+=info.substr(i,)+" ";

}

bigObj.innerHTML=str;

if(obj.offsetTop<){ //放大框在下方显示

bigObj.style.top=(obj.offsetTop+obj.offsetHeight+)+"px";

}else{ //放大框在上方显示

bigObj.style.top=(obj.offsetTop-bigObj.offsetHeight-)+"px";

}

bigObj.style.left=(obj.offsetLeft+obj.offsetWidth/-bigObj.offsetWidth/)+"px";

}

</script>

</head>

<body>

<br /><br /><br /><br /><br /><br />

<center>

请输入身份证号码：<input type="password" onKeyUp="showBigInfo(this)" maxlength="" size=""/>

<br />

请输入身份证号码：<input type="password" onKeyUp="showBigInfo(this)" maxlength="" size=""/>

<br />

请输入身份证号码：<input type="password" onKeyUp="showBigInfo(this)" maxlength="" size=""/>

</center>

</body>

</html>

js实现文本框中内容的放大显示的更多相关文章

  1. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

  2. js数据显示在文本框中(页面加载显示和按钮触动显示)

    web代码如下: <!DOCTYPE html> <html> <head> <title>jsTest02.html</title> &l ...

  3. 用js检测文本框中输入的是否符合条件并有错误和正确提醒

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 用js判断文本框中的是不是空，是否有空格

    <script type="text/javascript"> function checkRoleName(){ var userName=document.getE ...

  5. C#.NET常见问题(FAQ)-如何让文本框textbox内容靠右显示

    对于TextBox,我可以设置Text-Align属性为right,就可以让文字靠右了   对于Label而言,需要修改AutoSize为False,并修改TextAlign为MiddleRight, ...

  6. js限制文本框只能输入数字方法小结(转)

    这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例,学习下js控制文本框中输入数字的方法,需要的朋友可以参考下   有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数 ...

  7. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  8. DEV中dx:ASPxPopupControl 控件的使用（在窗口关闭或隐藏时，清楚文本框中的内容）

    //在窗口关闭或隐藏时,清楚文本框中的内容(核心代码) function(s, e) { ASPxClientEdit.ClearGroup('entryGroup'); } <asp:Cont ...

  9. 第二十七篇 -- 如何给静态文本设置成ico图标形式以及如何修改文本框中的内容

    修改静态文本框内容: CWnd* pWnd = GetDlgItem(IDC_STATIC1); pWnd->SetWindowText(_T("Server is on!" ...

随机推荐

  1. Linux I/O多路复用

    Linux中一切皆文件,不论是我们存储在磁盘上的字符文件,可执行文件还是我们的接入电脑的I/O设备等都被VFS抽象成了文件,比如标准输入设备默认是键盘,我们在操作标准输入设备的时候,其实操作的是默认打 ...

  2. mysqldump 备份命令使用中的一些经验总结

    mysqldump的一个小坑(自测) 正文:经常使用接触mysql复制功能的朋友应该对mysqldump命令不陌生吧,鄙人最近也在研究学习这一块的内容,经过几天的测试,发现mysqldump使用中容易 ...

  3. Zend Studio安装详解

    本篇文章介绍Zend Stuido安装 PHP安装请参考 http://www.cnblogs.com/azhe-style/p/php_new_env_build.html 一.下载 百度Zend ...

  4. 如何捕捉并分析SIGSEGV的现场

    linux下程序对SIGSEGV信号的默认处理方式是产生coredump并终止程序,可以参考man 7 signal Signal Value Action Comment ───────────── ...

  5. 《Inside UE4》目录

    <Inside UE4>目录 InsideUE4 UE4无疑是非常优秀的世界上最顶尖的引擎之一,性能和效果都非常出众,编辑器工作流也非常的出色,更难得宝贵的是完全的开源让我们有机会去从中吸 ...

  6. java程序设计之反弹高度

    题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? 代码: public class highe { double high ...

  7. java之多线程 二

    线程的生命周期: 当线程被创建并被启动时,它既不是一启动就进入了执行状态,在线程的生命周期中,它要经过new(新建),就绪(Runnable),运行(Running),阻塞(Blocked),dead ...

  8. SQLMAP参数介绍

    转自:http://zhan.renren.com/bugpower?gid=3602888498044629629&checked=true SQLMAP参数介绍 sqlmap的使用方式:p ...

  9. 用于制作app store的截图的工具：Brief Wrapper —— 最便捷的应用商店屏幕快照

    https://itunes.apple.com/cn/app/brief-wrapper-zui-bian-jie/id991730319?l=en&mt=8 可以快捷的做出类似于下面的这种 ...

  10. Git和Github简单教程

    原文链接:Git和Github简单教程 网络上关于Git和GitHub的教程不少,但是这些教程有的命令太少不够用,有的命令太多,使得初期学习的时候需要额外花不少时间在一些当前用不到的命令上. 这篇文章 ...