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

时间：2024-01-12 18:56:38
<!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>

相关文章