首页 > 代码库 > js实现文本框中内容的放大显示
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实现文本框中内容的放大显示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。