Forked from Steve Jones's Pen Phone Number Input.
A Pen by Save Pongsiri on CodePen.
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> | |
<body> | |
<div class="phone-field"> | |
(<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5" autofocus="autofocus"> | |
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> | |
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5">) | |
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> | |
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> | |
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> - | |
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> | |
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> | |
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> | |
<input class="phone-input" name="phone-input" type="tel" size="1" maxlength="1" placeholder="5"> | |
</body> |
Forked from Steve Jones's Pen Phone Number Input.
A Pen by Save Pongsiri on CodePen.
$(document).ready(function(){ | |
$('body').on('keyup', 'input.phone-input', function() | |
{ | |
var key = event.keyCode || event.charCode; | |
var inputs = $('input.phone-input'); | |
if(($(this).val().length === this.size) && key != 32) | |
{ | |
inputs.eq(inputs.index(this) + 1).focus(); | |
} | |
if( key == 8 || key == 46 ) | |
{ | |
var indexNum = inputs.index(this); | |
if(indexNum != 0) | |
{ | |
inputs.eq(inputs.index(this) - 1).val('').focus(); | |
} | |
} | |
}); | |
}); |
.phone-field { | |
margin: 50px; | |
font-size: 20px; | |
} | |
.phone-input { | |
width: 13px; | |
text-align: center; | |
font-size: 16px !important; | |
height: 1.75em; | |
border: 0; | |
outline: 0; | |
background: transparent; | |
border-bottom: 2px solid #ddd; | |
margin-right: 2px; | |
margin-left: 2px; | |
} | |
[placeholder]:focus::-webkit-input-placeholder { | |
transition: opacity 0.5s 0.0s ease; | |
opacity: 0; | |
} |