本文實例講述了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，顯示divfunction 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"}); }//隱藏divfunction 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>//m.survivalescaperooms.com/</div></body></html>希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
