Skip to content

Instantly share code, notes, and snippets.

@pounard
Created October 18, 2018 09:51
Show Gist options
  • Save pounard/036f86b934250db5c3cc4a6813b0e259 to your computer and use it in GitHub Desktop.
Save pounard/036f86b934250db5c3cc4a6813b0e259 to your computer and use it in GitHub Desktop.
IBAN input mask that does not work
function applyIBANMaks(input) {
var mask = '____ ____ ____ ____ ____ ____ ____'.split('');
var cursorPositionDelta = 0;
function strip(value) {
return value.split('').filter(function (chr) {
return /[a-zA-Z\d]/.test(chr);
});
}
function apply(data, currentCursorPosition) {
var length = data.length;
var index = 0;
return mask.map(function(chr) {
index++;
if (index <= length && chr != '_') {
if (cursorPositionDelta < currentCursorPosition) {
cursorPositionDelta++;
}
return chr;
}
return data.shift();
}).join('');
}
function init() {
input.value = apply(strip(input.value));
}
input.addEventListener('click', init);
input.addEventListener('keyup', function () {
cursorPositionDelta = 0;
var start = input.selectionStart;
var end = input.selectionEnd;
input.value = apply(strip(input.value), start);
input.selectionStart = start + cursorPositionDelta;
input.selectionEnd = end + cursorPositionDelta;
});
init(input);
}
var selector = '[name="{{ full_name }}[value]"]';
var input = document.querySelector(selector);
if (input) {
applyIBANMaks(input);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment