Here is a simple way to create an input field for Credit Cards. Credit card input fields were made in 4 different text fields to get the entries from the user. Which used to jump over to next input field automatically. But this code accepts numbers in a single input field with a space after every 4 characters. Simple Jquery is used to solve the problem. On every keypress in the focussed input field the action is initiated.
HTML for the input field
<input class="field" id="credit-card" value="" autocomplete="off" type="text" />
Jquery
<script>
jQuery(document).ready(function() {
$('#credit-card').on('keypress change', function () {
$(this).val(function (index, value) {
return value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ');
});
});
});
</script>
jQuery(document).ready(function() {
$('#credit-card').on('keypress change', function () {
$(this).val(function (index, value) {
return value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ');
});
});
});
</script>
