首页 > 操作系统 >

jQuery文本框输入数字弹出格式化层

电脑杂谈　发布时间：2020-02-24 03:00:56　来源：网络整理

jquery 数字格式化_jquery json 时间格式化_jquery 数字格式化

现在这些网站为了变得人性化，在这些细节进行了加强。

比较常见的一个效果是在文本框输入数字的之后，能够弹出一个层，并且即时显示大号字体。

数字且无法以三位分割进行显示。

代码示例如下:


[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style> 
*{
  margin:0;
  padding:0;
}
#main{
  width:728px;
  height:300px;
  padding:60px;margin:0 auto;
  border:5px solid #CCC;
}
input{
  border:1px solid #666;
}
.a{
  border:1px solid red;
}
.text-magnifier{
  background:none repeat scroll 0 0 #FFFFE4;
  border:1px solid #E6C99E;
  color:#FF4800;
  height:50px;
  left:170px;
  padding:5px 0 0 10px;
  position:absolute;
  top:30px;
  width:200px;
  font:20px Tahoma,Helvetica,Arial,Simsun,sans-serif;
}
.text-magnifier .mag-explain {
  border-top:1px solid #E6C99E;
  color:#6C6C6C;
  font-size:12px;
  margin-top:5px;
  width:190px;
}
.fn-hide{display:none}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $("#k").focus(function(evt){
    $(this).addClass("a");
    if(this.value.length>0){
      a(this);
      d(this);
    }
  })
  $("#k").keyup(function(evt){
    if(this.value.length==0){
      e();
    }else{
      a(this);
    }
    d(this);
  })
  $("#k").blur(function(evt){
    $(this).removeClass("a");
    e();
  })
})
//计算div的left和top，显示div
function a(evt){
  var y = 20;
  y = $(evt).outerHeight();
  $("#textMag").removeClass("fn-hide");
  var t = $(evt).offset().top;
  var l = $(evt).offset().left;
  $("#textMag").css({
    "top": (t+y) + "px",
    "left":l + "px"
  }); 
}
//隐藏div
function e(){
  $("#textMag").addClass("fn-hide")
}
//控制div里显示的数字
function d(e){
  var i = e.value;
  i=$.trim(i);
  var h=i.substring(0,3);
  i=i.substring(3);
  while(i&&i.length>0){
    h+=" "+i.substring(0,4);
    i=i.substring(4)
  }
  $("#mag-text").html(h);
}
</script>
</head>
<body>
<div id="main">
  手机号码:<input type="text" id="k" maxlength="11" class="i-text" value="" />
  <div class="text-magnifier fn-hide" id="textMag" >
    <div id="mag-text" class="mag-text"></div>
    <div class="mag-explain">手机号码是11位数字</div>
  </div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(function(){})jquery 数字格式化，当文档结构完全读取完毕再去执行变量中的代码。
（2）.$("#k").focus(function(evt){})，为文本框注册focus事件处理函数。
（3）.$(this).addClass("a"),为文本框添加名称为a的风格类。

（4）.if(this.value.length>0){
a(this);
d(this);
}，如果文本框的内容长度小于0，那么就执行以下两个函数，后面会有介绍。
（5）.$("#k").keyup(function(evt){}）,为文本框注册keyup事件处理函数。
（6）.if(this.value.length==0){
e();
}else{
a(this);
}

d(this);
进行判定，然后读取相应的变量jquery 数字格式化，相关函数的作用后面会有介绍。
（7）.$("#k").blur(function(evt){
$(this).removeClass("a");
e();
}),为文本框注册blur事件处理函数。
$(this).removeClass("a")，移除样式类a。
（8）.function a(evt){}，此变量可以设定块的显示，参数是一个元素对象。
（9）.var y = 20,声明一个变量并赋初值为20，貌似不用赋值，可能初衷是为了修改一个默认值。
（10）.y = $(evt).outerHeight(),在本代码中就是获取文本框的高度。

（11）.$("#textMag").removeClass("fn-hide"),移除名称为fn-hide的class类。
（12）.var t = $(evt).offset().top,获取文本框相对于document顶部的偏移量。
（13）.var l = $(evt).offset().left,获取文本框相对于document左侧的偏移量。
（14）.$("#textMag").css({ "top": (t+y) + "px",
"left":l + "px"
})，设置提示层的位置，通过中间计算进去的值，可以实现提示层无法跟文本框左对齐，并且平行贴近。
（15）.function e(){
$("#textMag").addClass("fn-hide")
},设置提示层隐藏。
（16）.function d(e){

var i = e.value;
i=$.trim(i);
var h=i.substring(0,3);
i=i.substring(3);
while(i&&i.length>0){
h+=" "+i.substring(0,4);
i=i.substring(4)
}
$("#mag-text").html(h);
},把数字进行三位一分隔效果。

					
本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-141860-1.html