Блог

Плейсхолдер в формах webasyst

В стандартных формах webasyst не всегда есть возможность вывести атрибут placeholder через шаблон темы дизайна. Как пример, стандартная контактная форма webasyst в личном кабинете, адреса и т.д. Пример реализации на Jquery

Берем значение для placeholder из title поля

$('.wa-field-address input').each(function(){    
    var $input = $(this)    
    var title = $input.attr('title')    
    $input.attr('placeholder', title) 
})

А вот так из span стоящего перед полем

$('.wa-field-password input').each(function(){
    var $input = $(this)
    var span = $input.prev();
    $input.attr('placeholder', span.text());
})

Для формы регистрации

$('.wa-signup-form-fields input').each(function(){
    var $input = $(this)
    var title = $(this).parents('.wa-field').find('.wa-name');
    $input.attr('placeholder', title.text());
})

Универсальная функция подстановки подсказки в input

(function ($) {
    var address = $('.wa-field-address');
    // берём все .wa-field, кроме адреса(у него подпункты со своей структурой)
    var fields = $('.wa-field').not(address);

    if (fields.length) {
        fields.each(function (i, el) {
            var wa_field = $(el);
            var wa_name = wa_field.find('.wa-name');

            if (wa_name.length) {
                wa_field.find('input').attr('placeholder', wa_name.text());
            }
        });
    }

    // работает с подпунктами адреса, не являющимися select
    if (address.length) {
        var address_fields = address.find('.field');

        if (address_fields.length) {
            address_fields.each(function (i, el) {
                var field = $(el);
                var name = field.find('span:first-child');
                var input = field.find('input');

                if (input.length) {
                    input.attr('placeholder', name.text());
                }
            });
        }
    }
})(jQuery);

Решение для order.html

( function($) {
    var inputs = $('[type=text], [type=email], [type=tel]');
    if(inputs.length) {
        inputs.each(function(i, el){
            var input = $(el);
            var label = input.parent().find('.wa-label');
            if(label.length) {
                label.hide();
                input.attr('placeholder', label.text());
            }
        });
    }
})(jQuery);
Иван

Иван

16 июля 2019

Просмотры: 72
Написать комментарий для поста "Плейсхолдер в формах webasyst"