Jquery и маска ввода телефона
К сожалению наиболее часто упоминаемый в «интернетах» плагин maskedinput не очень хорошо работает на мобильных устройствах. Адекватной заменой может служить плагин inputmask: https://github.com/RobinHerbots/Inputmask
Один огромный минус — уж очень «жирноват» плагин для простых задачь. Иногда лучше использовать «чистый» javascript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <input value="+7(___)___-____"> <script> window.addEventListener("DOMContentLoaded", function() { function setCursorPosition(pos, elem) { elem.focus(); if (elem.setSelectionRange) elem.setSelectionRange(pos, pos); else if (elem.createTextRange) { var range = elem.createTextRange(); range.collapse(true); range.moveEnd("character", pos); range.moveStart("character", pos); range.select() } } function mask(event) { var matrix = this.defaultValue, i = 0, def = matrix.replace(/\D/g, ""), val = this.value.replace(/\D/g, ""); def.length >= val.length && (val = def); matrix = matrix.replace(/[_\d]/g, function(a) { return val.charAt(i++) || "_" }); this.value = matrix; i = matrix.lastIndexOf(val.substr(-1)); i < matrix.length && matrix != this.defaultValue ? i++ : i = matrix.indexOf("_"); setCursorPosition(i, this) } var input = document.querySelector("input"); input.addEventListener("input", mask, false) }); </script> </body> </html> |