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>

时间： 2024-08-24 10:09:55

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

js数据显示在文本框中(页面加载显示和按钮触动显示)

web代码如下: <!DOCTYPE html> <html> <head> <title>jsTest02.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is

c#快速清除所有文本框中内容如何清除Form中所有的文本框内容?分两种情况:(1)当所有的文本框都是顶级控件,即它们都直接位于this.Controls(或groupBox.Controls)中,此时遍历一遍清除即可.(2)当文本框不全处于顶级,即部分包含在某些容器控件内,如groupBox中,由于控件在窗体中是严格分级摆放的.此时的文本框有的位于this.Controls中(即Form控件集中),有的则位于groupBox.Controls中. 对于(1),直接这样写就可: //或为grou

JS控制文本框中的密码显示/隐藏功能

<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <style> body,input{font:menu} </style> </head> <body> <form method="POST" action="addcheck.asp" name="forms&

c#快速清除所有文本框中内容（转）

如何清除Form中所有的文本框内容?分两种情况:(1)当所有的文本框都是顶级控件,即它们都直接位于this.Controls(或groupBox.Controls)中,此时遍历一遍清除即可.(2)当文本框不全处于顶级,即部分包含在某些容器控件内,如groupBox中,由于控件在窗体中是严格分级摆放的.此时的文本框有的位于this.Controls中(即Form控件集中),有的则位于groupBox.Controls中. 对于(1),直接这样写就可: //或为groupBox1.Controls/

动态实时监听文本框中内容的变化

@property (strong, nonatomic) UITextField *iPhoneText; @property (strong, nonatomic) UITextField *passwordText; @property (strong, nonatomic) UIButton *passwordBtn; viewdidLoad 中设置文本框的监听变化的方法 [self.iPhoneText addTarget:self action:@selector(textChang

用js检测文本框中输入的是否符合条件并有错误和正确提醒

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>捕获异常</title> </head> <script type="text/javascript"> function my_func(){ try{ x=document.getElementById("input_id").v

vb.net机房收费 & Register文本框为空提示，一键清空文本框所有内容

已经第二次机房收费系统重构了,一遍当然得有一遍的效果,正如对于文本框为空的提示方法,回顾第一遍机房,那些傻里傻气的If语句让自己对代码的亲和度大打折扣啊!那么到底有什么办法解决那些重复性的判断呢?这时候我们就要提到所谓的Model窗体了.在Model窗体中,建立一个封装数组,当窗体中需要判断大量文本框为空的时候,只需简单的调用即可. 新建一个Model类,来存放公共需要的部分. 1.定义一个结构体Term,且用结构体封装一个数组 Public Structure Term '定义结构体term

通过js动态生成文本框，怎么把文本框中的值传到java后台?

通过js动态生成文本框,怎么把文本框中的值传到java后台? 1 var lengths; 2 function insertrow2() //增加的一行方法2 3 { 4 newRow=document.all.yltable.insertRow(-1); 5 lengths = document.all.yltable.rows.length; 6 7 newcell=newRow.insertCell() ; 8 newRow.bgColor='#FFFFFF'; 9 newcell.al

如何禁止复制和黏贴文本框中的内容

如何禁止复制和黏贴文本框中的内容:在填写表单的时候,有时候会禁止复制黏贴一些重要的表单内容.例如,在充值话费的时候,需要填写两次手机号码,这个手机号码就不允许赋值黏贴,以防止手机号码填写错误.下面就通过实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>如何禁止文本框内容赋值黏贴</title> &