Маска телефона для input

[webtehnology]

Всем привет, в ходе перехода на бэм, возникает ряд вопросов, которые прям так и хочется решить по старинке, но нужно двигаться вперед. Итак вопрос, есть блок с формой, в нем куча инпутов, одному из них я передаю параметр name:'phone', в простом варианте js я просто бы сделал бы так

$(document).ready(function() {
     $('input[name="phone"]').mask('+7(999) 999-99-99');
     $('button').on('click', function(event) {
        event.preventDefault();
});

В варианте с бэм, как я понимаю, я создаю в папке desktop.blocks/form файлик form.js в нем описываю данную задачу, определяю блок form и тут встает вопрос как реализовать поиск input с параметром name:'phone': -повесить на него модификатор и найти через него -отыскать по параметру name

Как будет правильнее, может есть примеры какие, кроме того что предствленно в Быстром старте

[apsavin]

1. Блок form обычно представляет собой блок для любой формы на сайте - навряд ли в нём будет логика по добавлению маски для телефона
2. Можно создать модификатор для блока input (например, _type_phone) и в нём при инициализации добавлять маску + в bemhtml проставить корректные атрибуты для правильных клавиатур на мобильных устройствах.

[webtehnology]

1-Все формы содержат телефон в проекте 2-описывать это в папке блока input (input.js), обязательно ли использовать модификатор тк это уж больно громоздко выглядит

[apsavin]

1. Это пока все формы)
2. Как хотите, можно вообще всё в одном файле писать.

[webtehnology]

С размещением понятно, а саму то маску по name: phone как организовать

[apsavin]

я же говорю, сделать модификатор input_type_phone и в js-файле модификатора имплементировать. Имя может быть разное (в одной форме два телефона, например, домашний и служебный), на имя не завязываемся, завязываемся на модификатор.

[webtehnology]

Все понял, на каждый инпут просто навешивать свой модификатор (к примеру input_type_phone, input_type_data и тд)

С этим разобрался, далее все же хотел подключить библиотеку mackedinput. Правильна ли логика: 1-к блоку с формой миксую блок jquerymask 2-на уровне common.blocks создаю папку jquery в ней размещаю папку mask 3-создаю файл jquery__mask.js

modules.define('jquery__mask', ['jquery'], function(provide, jQuery) {
/*тут код самой библиотеки*/
});

4-в файле input_type_phone.js описываю что мне нужно получить

[apsavin]

Вроде хороший план, только я не понял, зачем к блоку с формой миксовать jquery___mask

Чтобы плагин к jQuery попал в сборку, нужно его указать в зависимостях input_type_phone. Ещё, я не понял, что за input_type_data. Имелся в виду input_type_date?

[webtehnology]

jquery___mask будет содержать общую библиотеку http://digitalbush.com/projects/masked-input-plugin/ или правильнее будет избегать подключения сторонних библиотек?

да ошибся date, конечно же

[apsavin]

Я не вижу причин избегать подключения сторонних библиотек.

[webtehnology]

@apsavin маска заработала, но не совсем нравиться запись, саму библиотеку maskedinput миксую к форме(а если на странице 10 форм, тогда проще замиксовать наверно к блоку page)

block:'form',
tag:'form',
mix:{block: 'maskedinput', },

После сборки получается такая конструкция:

<span class="input input_theme_circle input_type_phone i-bem input_js_inited" data-bem="{&quot;input&quot;:{}}">
<span class="input__box">
<input class="input__control i-bem input__control_js_inited"
 name="phone" placeholder="+7 (___) ___-__-__">
</span>
</span>

Суть вопроса, как записать по идеалогии

modules.define('input', ['i-bem__dom', 'jquery'], function (provide, BEMDOM, $) {

      provide(BEMDOM.decl({ block: 'input', modName: 'type', modVal: 'phone' }, {
        onSetMod: {
        js: {
            inited: function () {
              /*Хочу найти сам input*/
                var inputphone = this.findBlockInside('input__control');
              /*Так не работает*/  
             inputphone.mask('+7(999) 999-99-99');
             /*Так работает*/    
               $('input[name="phone"]').mask('+7(999) 999-99-99');

                   }
              }
         }
    }))
});

[apsavin]

1. Я не понял, зачем maskedinput миксовать к форме
2. this.elem('control').mask('+7(999) 999-99-99');

[webtehnology]

1-блок maskedinput содержит библиотеку, которая инклудится, вот файл maskedinput.js

modules.define('maskedinput', ['i-bem__dom', 'jquery'], function (provide, BEMDOM, $) {
window.jQuery = $;
/*Тут библиотека
https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.min.js
*/
}); 

Или такое решение в корне не правильное?

2- Спасибо большое! Все работает

[JiLiZART]

Я использую https://github.com/bem-contrib/bem-forms в ней есть все по валидации и поиску инпутов внутри формы да и сама форма реализована.

Далее написал вот такую обертку https://gist.github.com/JiLiZART/d720a440a7b6139ae17ab738dce39e3f над плагином https://github.com/jackocnr/intl-tel-input

[webtehnology]

@JiLiZART полезная инфа, очень!! А подскажи нет ли линков на готовые сборки слайдеров под бэм?

[tadatuta]

@webtehnology слайдер в смысле контрол или в смысле карусель? Если второе, то https://github.com/tadatuta/bl-carousel

[webtehnology]

@tadatuta то что нужно, правда заработало когда переименовал файл carousel.bemhtml в carousel.bemhtml.js

Нашёл так же слайдер https://github.com/godfreyd/bem-slider он идентичен https://github.com/tadatuta/bl-carousel те по одной картинке листает, пример хотелось наподобие https://ru.bem.info/libs/bem-bl/dev/touch-phone/b-slider/examples/ с возможностью управления

Вот ещё одно решение https://github.com/Oopscurity/oopsy

[belozer]

Кину и свои 5 копеек по реализации jQuery.mask

jquery/mask/jquerymask.deps.js

({
  mustDeps: [
    {block: 'jquery'}
  ]
})

jquery/mask/jquerymask.browser.js

modules.define('jquery', (provide, jQuery) => {
  /* borschik:include:../../libs/jquery-mask-plugin/dist/jquery.mask.min.js */
  provide(jQuery);
});

input/_type/input_type_phone.deps.js

({
  mustDeps: [
    {block: 'jquery', elem: 'mask'}
  ]
})

input/_type/input_type_phone.browser.js

modules.define('input',
(provide, Input) => {
  provide(Input.declMod({modName: 'type', modVal: 'phone'}, {
    onSetMod: {
      js: {
        inited: function() {
          this.__base.apply(this, arguments);
          this._elem('control').domElem.mask('+7 (000) 000-0000', {
            placeholder: '+7 (   ) ___-____'
          });
        }
      }
    },
    getVal: function() {
      let val = this._elem('control').domElem.val();
      return val.replace(/\+7|[\s-()]/g, '');
    }
  }));
});

[webtehnology]

@belozyorcev Спасибо за идею, а библиотека jquery.mask.min.js это http://zencoder.ru/javascript/jquery-mask-plugin/ ????

[belozer]

@webtehnology да