This article is an example of how jquery realizes the function of mobile phone number input prompting. Share to everyone for your reference. The implementation methods are as follows:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88, 89 90 91 92 93 94 95 96 97 98 99 |
<! 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 Mobile number input hint </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 0 0 #FFFFE4; b order: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})}//Compute div left and top, show div function A (evt) {var y = $ 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"}); ///Hide div function e () {$ ("#textMag"). AddClass ("Fn-hide")}//Control div Displays the number 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" > Mobile number: <input type= "text" id= "K" maxlength= "one" clas s= "I-text" value= "/> <div class=" Text-magnifier fn-hide "id=" Textmag "> <div id=" Mag-texT "class=" Mag-text "></div> <div class=" Mag-explain "> Mobile phone number is 11 digits </div> <div>http:// Www.jb51.net/</div> </body> </html> |
I hope this article will help you with your jquery programming.