<!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>
浙公网安备 33010602011771号