模仿淘宝手机号码输入框
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>美化手机号码输入框</title> <style> *{margin: 0;padding: 0;} body, button, input, select, textarea { font: 12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif; } a{text-decoration: none;} ul,li{list-style: none} .phone-input{ width: 500px; height: 500px; border: 1px solid blue; margin: 100px auto; } .phone-input .placeholder { color: #bbb; font-family: "tahoma,arial,\5b8b\4f53,sans-serif"; font-size: 12px; font-weight: normal; } .phone-title-input{ display: inline-block; height: 36px; line-height: 36px; width: 100px; text-align: right; font-size: 16px; color: #404040; } .phone-number-input{ display: inline-block; width: 327px; border: 1px solid #a3a3a3; padding: 2px 0 2px 6px; line-height: 28px; height: 28px; color: #3e3e3e; font-size: 14px; font-weight: bold; outline: none; } .input-menu{ height: 36px; width: 300px; border: 1px solid #a3a3a3; background-color: #0062A8; padding: 2px 0 2px 33px; line-height: 28px; height: 28px; color: #fff; font-size: 14px; font-weight: bold; position: absolute; } .input-menu a{ color: #fff; } .hide{display: none;} </style> </head> <body> <div class="phone-input"> <div class="phone-title-input">手机号码:</div> <input type="tel" placeholder="" data-placeholder="请输入手机号码" class="phone-number-input placeholder" data-target="phone-number-input-menu" id="phone-content-input"> </div> <div class="input-menu hide" id="phone-number-input-menu"> <a href="javascript:;"> <span>183-3457-64</span> </a> </div> <script src="jquery-1.9.1.min.js"></script> <script> var ui = { $phoneText: $('#phone-content-input') , $phoneMenu: $('#phone-number-input-menu') }; var oPage = { init: function() { this.view(); this.listen(); }, view: function() { var self = this; ui.$phoneText.val(ui.$phoneText.data('placeholder')); }, listen: function() { var self = this; ui.$phoneText.on('focus', function() { var $this = $(this), content = $this.val(), placeholder = $this.data('placeholder'); if(content == placeholder) { $this.val('').removeClass('placeholder'); } }).on('blur', function() { var $this = $(this), content = $this.val(), placeholder = $this.data('placeholder'); if(content == '') { $this.val(placeholder).addClass('placeholder'); } ui.$phoneMenu.addClass('hide'); }).on('keydown', function(e) { var $this = $(this), offset = $this.offset(), height = $this.outerHeight(), defaultValue = $this.val(), pressValue, nowValue; // 只能输入数字和删除键、插入建 if((e.keyCode < 48 || e.keyCode > 57) && e.keyCode != 8 && e.keyCode != 45) { e.returnValue = false; return false; } // 避免文本框为空时,按删除键 if(!defaultValue.length && e.keyCode == 8) { return false; } // 当输入框的第一个数字非1时 if(defaultValue.length && defaultValue.substr(0, 1) > 1 && e.keyCode != 8 ) { return false; } // 当超过11位数字则停止显示 if(defaultValue.length > 10 && e.keyCode != 8) { return false; } pressValue = String.fromCharCode(e.keyCode); if(e.keyCode === 8) { nowValue = $this.val().substr(0, $this.val().length - 1); } else{ nowValue = defaultValue + pressValue; } if(!nowValue.length) { ui.$phoneMenu.addClass('hide'); } else{ ui.$phoneMenu.find('span').text(self.checkPhone(nowValue)).end().css({'left': offset.left, 'top': offset.top + height}).removeClass('hide'); } }); }, checkPhone: function(phone) { var reg = /^1\d*/; if(!reg.test(phone)) { return '手机号码格式不正确'; } else{ if(phone.length < 4) { return phone.replace(/^(\d{3})$/, "$1"); } else if(phone.length >= 3 && phone.length < 7){ return phone.replace(/^(\d{3})(\d*)$/, "$1-$2"); } else if(phone.length >= 7 && phone.length <= 11){ return phone.replace(/^(\d{3})(\d{4})(\d*)$/, "$1-$2-$3"); } } } }; oPage.init(); </script> </body> </html>