Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #61 (permalink)  
Старый 16.01.2020, 01:10
Новичок на форуме
Отправить личное сообщение для Alexandr Battlehater Посмотреть профиль Найти все сообщения от Alexandr Battlehater
 
Регистрация: 16.01.2020
Сообщений: 1

Переписал в ооп с возможностью настройки
Изменил код так, чтобы его можно было использовать на множестве инпутов(с разными настройками).

На странице несколько инпутов, для каждого зададим дата-атрибутом маску:
<input type="tel" name="tel1" placeholder="+38 (___) ___-__-__" data-mask="+38 (___) ___-__-__">
<input type="tel" name="tel2" placeholder="+7 ___ ___-____" data-mask="+7 ___ ___-____">
<input type="tel" name="tel3" placeholder="8 (___) ___-__-__" data-mask="8 (___) ___-__-__">
<input type="tel" name="tel4" placeholder="+380(___)___ __ __" data-mask="+380(___)___ __ __">
<input type="tel" name="tel5" placeholder="___-__-__" data-mask="___-__-__">


window.addEventListener('DOMContentLoaded', function() {
 
  /* Инициализируем маски для каждого из них */
  var inputs = document.querySelectorAll('input[type="tel"]');

  Array.prototype.forEach.call(inputs, function(input) {
    new InputMask({
      selector: input,
      layout: input.dataset.mask // читаем дата-атрибут, установленный в html и устанавливаем его значение в качестве маски
    })
  })

  /*
  Одиночный вызов может выглядеть так: 
  
  new InputMask({
      selector: '#myInput',
      layout: '+385(___) ___-__-__'
    })
  */

})

function InputMask(options) {
  this.el = this.getElement(options.selector);
  if (!this.el) return console.log('Что-то не так с селектором');
  this.layout = options.layout || '+_ (___) ___-__-__';
  this.maskreg = this.getRegexp();
  this.setListeners();
}

InputMask.prototype.getRegexp = function () {
  var str = this.layout.replace(/_/g, '\\d');
  str = str.replace(/\(/g, '\\(');
  str = str.replace(/\)/g, '\\)');
  str = str.replace(/\+/g, '\\+');
  str = str.replace(/\s/g, '\\s');
  return str;
};

InputMask.prototype.mask = function (e) {
  var _this = e.target,
      matrix = this.layout,
      i = 0,
      def = matrix.replace(/\D/g, ""),
      val = _this.value.replace(/\D/g, "");

  if (def.length >= val.length) val = def;
  _this.value = matrix.replace(/./g, function (a) {
    return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a;
  });

  if (e.type == "blur") {
    var regexp = new RegExp(this.maskreg);
    if (!regexp.test(_this.value)) _this.value = "";
  } else {
    this.setCursorPosition(_this.value.length, _this);
  }
};

InputMask.prototype.setCursorPosition = function (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();
  }
};

InputMask.prototype.setListeners = function () {
  this.el.addEventListener("input", this.mask.bind(this), false);
  this.el.addEventListener("focus", this.mask.bind(this), false);
  this.el.addEventListener("blur", this.mask.bind(this), false);
};

InputMask.prototype.getElement = function (selector) {
  if (selector === undefined) return false;
  if (this.isElement(selector)) return selector;

  if (typeof selector == 'string') {
    var el = document.querySelector(selector);
    if (this.isElement(el)) return el;
  }

  return false;
};

InputMask.prototype.isElement = function (element) {
  return element instanceof Element || element instanceof HTMLDocument;
};


ссылка на jsfiddle: https://jsfiddle.net/battlehater/0oaf16bv/

Последний раз редактировалось Alexandr Battlehater, 16.01.2020 в 01:15.
Ответить с цитированием
  #62 (permalink)  
Старый 16.01.2020, 01:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,603

Alexandr Battlehater,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать скролл без возврата? Александр141 Элементы интерфейса 3 24.08.2015 15:40
как сделать tooltip без jQuery CrossFire Элементы интерфейса 2 18.11.2013 00:29
Как сделать проверку input 5-7 символов lamer Общие вопросы Javascript 5 18.06.2012 21:10
Как сделать submit без самой кнопки submit shaltay jQuery 3 06.05.2011 14:36
Как сделать INPUT с красивым задним фоном? greatilya (X)HTML/CSS 15 26.11.2009 13:04