Ребята, привет! есть такой код:
<html lang="ru"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Маска ввода телефона в input на чистом JS</title>
</head>
<body>
<div style="margin: 150px auto; max-width: 980px;" class="container">
<h1>Phone Input Mask Plugin Demo</h1>
<form>
<div>
<label>phone</label>
<input type="tel" name="tel[]" class="masked-phone" data-phonemask="+38 (___) ___-____" />
</div>
<div>
<label>phone</label>
<input type="tel" name="tel[]" class="masked-phone" data-phonemask="+1 (___) __-___-___" />
</div>
<div>
<label>phone</label>
<input type="tel" name="tel[]" class="masked-phone" data-phonemask="+44 (___) ___-__-__" />
</div>
<div>
<label>phone</label>
<input type="tel" name="tel[]" class="masked-phone" data-phonemask="+456456 (_)_()__-_(_)()_-____" />
</div>
<div>
<label>phone</label>
<input type="tel" name="tel[]" class="masked-phone" />
</div>
</form>
<div id="console">
</div>
</div>
</body>
<script type="text/javascript">
class PhoneField {
constructor (a, b = '+7 (___) ___-__-__', c = '_') {
this.handler = a,
this.mask = b,
this.placeholder = c,
this.setLength(),
this.setValue(),
this.start = this.placeHolderPosition() - 1,
this.handler.addEventListener('focusin', () => {this.focused()}),
this.handler.addEventListener('keydown', d => {this.input(d)})
}
focused () {
let a = this.placeHolderPosition();
this.handler.selectionStart = a,
this.handler.selectionEnd = a;
}
input (a) {
if (this.isDirectionKey(a.key) || a.preventDefault(), this.isNum(a.key)) {
this.changeChar(a.key);
} else if (this.isDeletionKey(a.key)) {
if ('Backspace' === a.key) {
let b = this.start;
this.changeChar(this.placeholder, -1, b)
} else {
this.changeChar(this.placeholder)
}
}
}
setLength () {
this.handler.maxLength = this.mask.length;
}
setValue () {
this.handler.value = this.mask;
}
isNum (a) {
return !isNaN(a) && parseInt(+a) == a && !isNaN(parseInt(a, 10));
}
isDeletionKey (a) {
return 'Delete' === a || 'Backspace' === a;
}
isDirectionKey (a) {
return 'ArrowUp' === a || 'ArrowDown' === a || 'ArrowRight' === a || 'ArrowLeft' === a || 'Tab' === a;
}
isPlaceholder (a) {
return a == this.placeholder;
}
placeHolderPosition () {
return this.handler.value.indexOf(this.placeholder);
}
changeChar (a, b = 1, c = this.mask.length) {
let d = this.handler.value,
f;
f = 0 < b ? this.handler.selectionStart : this.handler.selectionStart - 1;
let g = '';
if (f === c) {
return !1;
}
if (!this.isNum(d[f]) && !this.isPlaceholder(d[f])) {
do {
if (f += b, f === c) {
return !1;
}
} while (!this.isNum(d[f]) && !this.isPlaceholder(d[f]));
}
g = this.replaceAt(d, f, a),
this.handler.value = g,
0 < b && (f += b),
this.handler.selectionStart = f,
this.handler.selectionEnd = f
}
replaceAt (a, b, c) {
return a.substring(0, b) + c + a.substring(++b);
}
}
document.addEventListener('DOMContentLoaded', function () {
'use strict';
let a = document.getElementsByClassName('masked-phone'),
b = [];
for (let c = 0; c < a.length; c++) {
b.push(new PhoneField(a[c], a[c].dataset.phonemask, a[c].dataset.placeholder));
}
});
</script>
</html>
Это маска телефона. Нужно блокировать возможность подсветки кода региона (+375 и т. п.). Если поставить фокус в скобки и пробовать стереть, он не будет пускать курсор на код региона, а если поставить фокус сразу на него, он будет меняться -
https://prnt.sc/11g29h0. Нужно блокировать это изменение, как например, в маске Jquery. Не спрашивайте почему чистый JS, это за..б в голову, долго рассказывать. С помощью какой функции или какими средствами можно было бы это сделать, хоть какую информацию. Спасибо!
