Маска для телефона на JS
Ребята, привет! есть такой код:
<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, это за..б в голову, долго рассказывать. С помощью какой функции или какими средствами можно было бы это сделать, хоть какую информацию. Спасибо! |
Часовой пояс GMT +3, время: 03:36. |