jQuery实现手机号码输入提示功能实例

2019-11-20 12:34:59

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>//www.VeVB.COm/</div></body></html>

希望本文所述对大家的jQuery程序设计有所帮助。

上一篇：jquery中$each()方法的使用指南

下一篇：javascript实现checkbox全选的代码