Как подгрузить маску телефона в модальном окне фреймворка uikit?

Question

[Константин Гусаров]

На одной странице имеется открытая форма сбора контактов (все работает) и форма в модальном окне. Как запустить скрипт маски телефона при открытии модального окна?

<div id="soft-contact" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <form class="uk-grid-small" id="how2buy" method="post" action="product.html#how2buy" uk-grid>
            <div class="uk-width-1-1">
                <input class="uk-input" type="tel" id="phone" placeholder=" " name="phone" value="">
                <input class="uk-checkbox" type="checkbox" id="phone_mask" checked><label id="descr" for="phone_mask">Check if input is correct</label>
            </div>
            <div class="uk-width-1-1 uk-text-right">
                <button type="submit" class="uk-button uk-width-1-1">Send</button>
            </div>
        </form>
    </div>
</div>

<script>
var maskList = $.masksSort($.masksLoad("/phone-codes.json"), ['#'], /[0-9]|#/, "mask");
var maskOpts = {
    inputmask: {
        definitions: {
            '#': {
                validator: "[0-9]",
                cardinality: 1
            }
        },
        //clearIncomplete: true,
        showMaskOnHover: false,
        autoUnmask: true,
        clearMaskOnLostFocus: false
    },
    match: /[0-9]/,
    replace: '#',
    list: maskList,
    listKey: "mask",
    onMaskChange: function(maskObj, completed) {
        if (completed) {
            var hint = maskObj.name_en;
            if (maskObj.desc_en && maskObj.desc_en != "") {
                hint += " (" + maskObj.desc_en + ")";
            }
            $("#descr").html(hint);
        } else {
            $("#descr").html("Check if input is correct");
        }
        $(this).attr("placeholder", $(this).inputmask("getemptymask"));
    }
};

$('#phone_mask').change(function() {
    if ($('#phone_mask').is(':checked')) {
        $('#phone').inputmasks(maskOpts);
    } else {
        $('#phone').inputmask("+[####################]", maskOpts.inputmask)
            .attr("placeholder", $('#phone').inputmask("getemptymask"));
        $("#descr").html("Check if input is correct");
    }
});

$('#phone_mask').change();
</script>

Answer 1

[Алексей Николаев]

UIkit.util.on('#soft-contact', 'beforeshow', function () {
    // do something
});