js实现文本框中内容的放大显示_JavaScript

js实现文本框中内容的放大显示

<!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=0;i<info.length;i+=4){

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

}

bigObj.innerHTML=str;

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

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

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

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

}

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

}

</script>

</head>

<body>

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

<center>

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

<br />

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

<br />

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

</center>

</body>

</html>

搜索

热门标签:

js实现文本框中内容的放大显示