<!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. 实战搭建SVN代码版本服务器

    前言:公司要求搭建一台SVN代码版本管理服务器,用于管理所有代码资产: 项目架构图 1.环境安装 [root@host_centos ~]#yum –y install subversion mod_ ...

  2. OpenStack 企业私有云的若干需求（3）：多租户和租户间隔离(multi-tenancy and isolation)

    本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...

  3. jquery常用函数与方法

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目.jQuery 1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...

  4. 科学计算器（JAVA实现）

    前记: 大二学 Java 的时候写的,现在贴上来,只为留念. 再翻代码,自己看着都头疼.一重重的 if 嵌套,当时写得费劲,现在看着更费劲. 代码思想: 代码的大致思想是这样: 首先定义一个算式字符串 ...

  5. CF380C. Sereja and Brackets[线段树 区间合并]

    C. Sereja and Brackets time limit per test 1 second memory limit per test 256 megabytes input standa ...

  6. UVALive - 3942 Remember the Word[树状数组]

    UVALive - 3942 Remember the Word A potentiometer, or potmeter for short, is an electronic device wit ...

  7. [No000089]String的(补空位)左对齐,(补空位)右对齐

    using System; namespace Chinese中文排序Sort { internal class Program { /// <summary> /// 取子字符串 /// ...

  8. python基础之文件读写

    python基础之文件读写 本节内容 os模块中文件以及目录的一些方法 文件的操作 目录的操作 1.os模块中文件以及目录的一些方法 python操作文件以及目录可以使用os模块的一些方法如下: 得到 ...

  9. Chrome 控制台console的用法(转)

    下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x", "dir" ...

  10. IIS部署站点相关经验总结

    IIS部署站点相关经验总结 1.IIS和.net4.0安装是有先后顺序的,应该先安装.net framework 4.0,再安装IIS.如果按相反顺序安装的话,IIS中看不到4.0相关的东西,那么只能 ...