cari

Rumah >hujung hadapan web >tutorial js >Contoh pelaksanaan jQuery bagi fungsi gesaan input nombor telefon bimbit function_jquery

Contoh pelaksanaan jQuery bagi fungsi gesaan input nombor telefon bimbit function_jquery

WBOY
WBOYasal
2016-05-16 16:01:421327semak imbas

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan fungsi gesaan input nombor telefon mudah alih. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery手机号码输入提示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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 type="text/javascript" src="jquery1.3.2.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();
this.value=this.value
})
})
//计算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>http://www.jb51.net/</div>
</body>
</html>

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penjelasan terperinci tentang parameter kedua jQuery() method_jqueryArtikel seterusnya：Penjelasan terperinci tentang parameter kedua jQuery() method_jquery

Artikel berkaitan

Lihat lagi