|
Сообщение от LADYX
|
|
Да, я знаю, но мне не хотелось бы устанавливать целый плагин.
|
В любом случае тут двумя строчками кода не отделаешься. Хотя есть тут один виртуоз... Может напишет)
LADYX, вот делал как-то маску для времени. Можно модифицировать под свои нужды.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inputmask light</title>
</head>
<body>
<input id="input_time" type="text">
<label for="input_time">Время</label>
<script>
var inputMask = function (d, s1, s2) {
var el = d.querySelector(s1);
if (!el) return;
mask(el, '__:__:__', d.querySelector(s2));
function mask(node, mask, placeholder) {
node.addEventListener('mouseenter', switchTypeEvent);
node.addEventListener('mouseleave', switchTypeEvent);
node.addEventListener('click', switchTypeEvent);
node.addEventListener('keydown', switchTypeEvent);
node.addEventListener('blur', switchTypeEvent);
function switchTypeEvent(e) {
switch(e.type) {
case 'mouseenter':
hangMask(node, mask, true);
break;
case 'mouseleave':
hangMask(node, mask, false);
break;
case 'blur':
hangMask(node, mask, false);
break;
case 'click':
var indx = getFirstUnderscoreIndx(node);
setCaretPosition(node, indx);
break;
case 'keydown':
var valid_code = validate(e);
if (valid_code &&
valid_code !== 8 &&
valid_code !== 9 &&
valid_code !== 13 &&
valid_code !== 17 &&
valid_code !== 116 &&
valid_code !== 37 &&
valid_code !== 39) {
e.preventDefault();
replaceFirstUnderscore(node, e);
} else if (valid_code && valid_code === 8) {
e.preventDefault();
replaceNumberToUnderscore(node, e);
} else if (valid_code &&
(valid_code === 9 ||
valid_code === 13 ||
valid_code === 116 ||
valid_code === 37 ||
valid_code === 39)) {
} else if (valid_code && valid_code === 17) {
node.blur();
} else {
e.preventDefault();
}
break;
default:
}
}
function hangMask(element, value, state) {
if (!element.value && state) {
element.value = value;
visiblePlaceholder('none');
} else if (element.value === value &&
!state &&
(!isFocused() ||
isFocused() !== element.id)) {
element.value = '';
visiblePlaceholder('block');
}
function isFocused() {
return d.activeElement.id;
}
function visiblePlaceholder(state) {
if (placeholder)
placeholder.style.display = state;
}
}
function setCaretPosition(element, n) {
if (n < 0) return;
element.selectionEnd = n;
}
function getFirstUnderscoreIndx(element) {
return element.value.search(/_/);
}
function validate(e) {
if ((e.keyCode < 48 &&
e.keyCode !== 8 &&
e.keyCode !== 9 &&
e.keyCode !== 13 &&
e.keyCode !== 17 &&
e.keyCode !== 37 &&
e.keyCode !== 39) ||
e.keyCode > 57 &&
e.keyCode !== 116) {
return false;
}
return e.keyCode;
}
function replaceFirstUnderscore(element, e) {
var number = e.key;
var val = element.value;
element.value = val.replace(/_/, number);
var indx = getFirstUnderscoreIndx(element);
setCaretPosition(element, indx);
}
function replaceNumberToUnderscore(element, e) {
var val = element.value;
var caret_index = getCaretPosition(element);
var symbol_index = getSymbolIndex(val, element, caret_index);
var new_mask = cutMask(element, symbol_index);
if (new_mask) {
element.value = new_mask;
var indx = getFirstUnderscoreIndx(element);
setCaretPosition(element, indx);
}
function cutMask(el, n) {
if (n < 0) return false;
var cut1 = el.value.substring(0, n);
var cut2 = el.value.substring(n + 1);
return cut1 + '_' + cut2;
}
function getSymbolIndex(val, el, indx) {
var n = --indx;
if (val[n] === ':' || val[n] === '-') {
setCaretPosition(el, n);
return --n;
}
return n;
}
function getCaretPosition(el) {
return el.selectionEnd;
}
}
}
}
inputMask(document, '#input_time', 'label[for="input_time"]');
</script>
</body>
</html>
