Skip to content

Instantly share code, notes, and snippets.

@savepong
Created November 9, 2018 05:13
Show Gist options
  • Save savepong/358b0bfda1b4ff68a0536df3dc79d076 to your computer and use it in GitHub Desktop.
Save savepong/358b0bfda1b4ff68a0536df3dc79d076 to your computer and use it in GitHub Desktop.
Phone Number Input
<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>
$(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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment