jQuery實現手機號碼輸入提示功能實例

2024-05-06 16:19:02

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery實現手機號碼輸入提示功能,實例分析了jQuery針對手機號碼的判斷與提示相關技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了jQuery實現手機號碼輸入提示功能的方法。分享給大家供大家參考。具體實現方法如下：

<!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.49028c.com/</div>

</body>

</html>