jquery-input-lettering
Version:
Light-weight jquery input lettering plugin
95 lines (93 loc) • 4 kB
HTML
<html>
<head>
<title>jQuery Input Lettering</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../dist/jquery.inputLettering.js"></script>
<style>
#phoneInput .field-wrapper {
position: relative;
height: 100vh;
width: 100%;
}
#phoneInput .form-group {
min-width: 300px;
width: 50%;
margin: 8em auto;
display: flex;
border: 1px solid rgba(96,100,104,0.3);
}
#phoneInput .letter {
height: 43px;
border-radius: 0;
border: none;
text-align: center;
max-width: calc((100% / 10) - 1px);
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(100% / 10);
outline-style: none;
padding: 5px 0;
font-size: 18px;
font-weight: bold;
}
#phoneInput .letter + .letter {
border-left: 1px solid rgba(96,100,104,0.3);
}
@media (max-width: 480px) {
#phoneInput .letter {
font-size: 16px;
padding: 2px 0;
height: 38px;
}
}
</style>
</head>
<body>
<div id="phoneInput">
<div class="field-wrapper">
<div class="form-group phone">
<input type="text" name="letters[]" class="letter"
pattern="[0-9]*" inputmode="numeric" maxlength="1">
<input type="text" name="letters[]" class="letter"
pattern="[0-9]*" inputmode="numeric" maxlength="1">
<input type="text" name="letters[]" class="letter"
pattern="[0-9]*" inputmode="numeric" maxlength="1">
<input type="text" name="letters[]" class="letter"
pattern="[0-9]*" inputmode="numeric" maxlength="1">
<input type="text" name="letters[]" class="letter"
pattern="[0-9]*" inputmode="numeric" maxlength="1">
<input type="text" name="letters[]" class="letter"
pattern="[0-9]*" inputmode="numeric" maxlength="1">
<input type="text" name="letters[]" class="letter"
pattern="[0-9]*" inputmode="numeric" maxlength="1">
<input type="text" name="letters[]" class="letter"
pattern="[0-9]*" inputmode="numeric" maxlength="1">
<input type="text" name="letters[]" class="letter"
pattern="[0-9]*" inputmode="numeric" maxlength="1">
<input type="text" name="letters[]" class="letter"
pattern="[0-9]*" inputmode="numeric" maxlength="1">
</div>
</div>
</div>
<script>
$( function() {
$('#phoneInput').letteringInput({
inputClass: 'letter',
onLetterKeyup: function ($item, event) {
console.log('$item:', $item);
console.log('event:', event);
},
onSet: function ($el, event, value) {
console.log('element:', $el);
console.log('event:', event);
console.log('value:', value);
}
});
} );
</script>
</body>
</html>