<!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. java中设置代理的两种方式

    1 前言 有时候我们的程序中要提供可以使用代理访问网络,代理的方式包括http.https.ftp.socks代理.比如在IE浏览器设置代理. 那我们在我们的java程序中使用代理呢,有如下两种方式. ...

  2. gdb进程调试，多进程调试

    1.单进程的调试 常规的通过gdb cmd这种方式开启调试,特别说明的是通过attach的方法附加到一个指定的进程上去进行调试,这种方法适合于调试一个已经运行的进程,具体用法:  gdb -p [pi ...

  3. [WPF系列]-基础系列 Property Trigger, DataTrigger & EventTrigger

    So far, we worked with styles by setting a static value for a specific property. However, using trig ...

  4. hdu 4704 Sum （整数和分解+快速幂+费马小定理降幂）

    题意: 给n(1<n<),求(s1+s2+s3+...+sn)mod(1e9+7).其中si表示n由i个数相加而成的种数,如n=4,则s1=1,s2=3.                  ...

  5. Excellent Articles

    Lisp The roots of lisp Recursive Functions of Symbolic Expressions and Their Computation by Machine, ...

  6. 【原】迎接微信winphone 5.0 版本的IE10样式兼容

    微信 Android 5.1 和 iPhone 5.1 已正式发布了,据说本12月底,微信将推出 Winphone 5.0版本,全面支持微信支付,它绑定 IE10 浏览器,那么做微信公众号的 H5 页 ...

  7. NOIP2013花匠

    描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希望剩下的花排列得比较别致. 具体而言, ...

  8. Oracle SQL函数

    Oracle将函数大致分为单行函数,聚合函数和分析函数. 单行函数分为字符函数,日期函数,转换函数,数字函数,通用函数,decode函数 一.字符函数 1)大小写控制函数 01.Lower() 全部小 ...

  9. inverse

    首先术语inverse 被翻译为反转的意思.inverse 制定了关联关系中的方向. 当set的inverse属性默认情况下,hibernate会按照持久化对象的属性变化来同步更新数据库. 得到两条s ...

  10. jdbc java数据库连接 2）jdbc接口核心的API

    JDBC接口核心的API java.sql.*   和  javax.sql.*(java2.0以后更新的扩展) |- Driver接口: 表示java驱动程序接口.所有的具体的数据库厂商要来实现此接 ...