Кастомизация
19
Сен
12

Маска поля с помощью JQuery

Для создания маски нам понадобятся две JS-библиотеки:

  • jQuery (локальная копия версии jquery-1.6.3.min);
  • Masked Input Plugin (локальная копия версии jquery.maskedinput-1.3.min; чуть-чуть подправлена – добавлена поддержка кириллицы) – это плагин для jQuery, который собственно и реализует маску.

Создайте для них в CRM Веб-ресурсы и подключите их к нужной форме (например, для Интереса).

Далее, нам понадобится еще один JS Веб-ресурс, содержащий код инициации маски и сохранения значения маски:

if (typeof (MyFunctionsPack) == "undefined") { MyFunctionsPack = {}; }

MyFunctionsPack.MyFunctions = {
    Mask: function (field, format) {
        $("#" + field).mask(format);
    },
    formatField: function (fieldName) {
        if (Xrm.Page.getAttribute(fieldName).getValue() != $("#" + fieldName).val())
        Xrm.Page.getAttribute(fieldName).setValue($("#" + fieldName).val());
    }
}

Данный код состоит из двух функций:

  • Mask: собственно и инициирует наложение маски на поле. Принимает два праметра:
    • field – имя поля на которого накладывается маска;
    • format – формат маски может быть следующих видов:
      aaa-aaa aaa-aa
      9(999) 999-99-99
      ******-**
      

      где символы:

      • a (латинская) – представляют собой символы A-Z, a-z, А-Я, а-я (поддержка кирилицы добавлена только в локальной копии, если качали исходную библиотеку Вам придется добавить поддержку самостоятельно);
      • 9 — представляют собой символы от 0 до 9;
      • * — представляют собой символы A-Z, a-z, А-Я, а-я, 0-9.
  • formatField: данная функция сохраняет значение маски в поле CRM. Причина этого в том, что плагин Masked Input Plugin не хранит значение маски в полях CRM, поэтому мы должны позаботиться о переносе значения а поле CRM самостоятельно. Делается то путем элементарного сравнения значения в html и значения в поле CRM. Если они отличаются, то это значит, что пользователь изменил поле. Функция принимает вего один параметр – имя поля, для которого включена маска.

На онлоаде формы задействуйте функцию Mask и передайте ей имя поля и формат маски. А на онсейве вызовите функцию formatField и передайте имя поля с маской.

Идем проверять… 🙂



Дополнительно

Вы также можете с помощью этого плагина сделать следующие вещи:

  • Заменители — символы отображающиеся на месте еще не введенных пользователем символов (по умолчанию это знак подчеркивания «_»):
    Mask: function (field, format, plchldr) {
        $("#" + field).mask(format, { placeholder: plchldr });
    }
    
  • Обратный вызов функции при заполнении маски:
    Mask: function (field, format) {
        $("#" + field).mask(format, { completed: function () { alert("Вы ввели следующее: " + this.val()); } });
    }
    
  • Вы можете теперь задать свои определения маски:
    Mask: function (field, format, plchldr) {
        $.mask.definitions['~'] = '[+-]';
        $("#" + field).mask(format, { placeholder: plchldr });
    }
    

    И в качестве формата маски передать:

    ~9.99 ~9.99 999
  • Часть Вашей маски может быть опциональной. Для этого используется специальный символ «?» — все, что перечислено после него считается не обязательным для ввода. Например:
    (999) 999-9999? x99999
Комментарии (12)
  • Родион 19.09.2011

    Маска то делается, Только вот сохранять телефон он не хочет:( а так все красиво, только сохраняло бы)

  • slivka_83 19.09.2011

    Вы выполнили это:
    >А на онсейве вызовите функцию formatField и передайте имя поля с маской.

  • Родион 19.09.2011

    а да точно) я там тож .Mask прописал:)
    работает

  • SBS 19.09.2011

    Отличная вещь, но не совсем корректно работает.
    При заполнении пустых обязательных полей с наложенной маской ругается, что поле пустое.

    Может это как-то можно обойти?

  • slivka_83 19.09.2011

    2SBS
    А Вы выполнили это:
    >А на онсейве вызовите функцию formatField и передайте имя поля с маской

  • SBS 19.09.2011

    Пробовал.
    При наложении маски на необязательное поле значение сохраняется без проблем, а при обязательном ругается, что не заполнено.
    Для наглядности сделал тестовое решение http://narod.yandex.ru/disk/31520810001/MaskedInput_1_0_0_0_managed.zip
    или не управляемое
    http://narod.yandex.ru/disk/31520830001/MaskedInput_1_0_0_0.zip

  • SBS 19.09.2011

    Пробовал, но не помогает.
    Для наглядности сделал решение.
    Скачать можно http://narod.ru/disk/31520810001/MaskedInput_1_0_0_0_managed.zip.html

  • slivka_83 19.09.2011

    Сейчас чуток занят — поэтому проверить не могу, но предположение такое… На onSave вешается код, чтобы перенести значение маски из «кода» маски в обычное поле CRM. Но судя по всему проверка на заполненность обязательного поля происходит раньше, чем выполняется событие сохранения. Поэтому решение такое — повесить код переноса значения не на onSave, а на onChange обязательного поля!

  • slivka_83 19.09.2011

    хм, чего то ступил — и на onChange он не срабатывает… ну пока только вижу что нужно убирать обязательность заполнения и проверять ее скриптом на onSave… конечно способ кривой но пока другого не вижу…

  • slivka_83 19.09.2011

    Хотя нет вижу… нужно дописать скрипт таким образом чтобы после потери фокуса полем происходил вызов FireOnChange обязательного поля.. надо будет подумать и дописать… Вы если что напоминайте 🙂 а то забуду 🙂

  • Alexander Sumkin 19.09.2011

    Добрый день.

    А не удалось победить работу маски на поле?


    С уважением,
    A. S.

  • slivka_83 19.09.2011

    Добрый день. Пока к сожалению нет времени этим заниматься.

*

code