Кнопка “Добавить в корзину” и опции мгновенно открываются и закрываются после перемещения выше описания.

Вопрос или проблема

<script>
    $(function(){
        // Создаем функцию
        function moveCart(){
            // Если ширина экрана пользователя меньше 768 пикселей
            if($(window).width() < 768 ){
                /*
                    выбираем область корзины, включая кнопку корзины, параметры, название продукта и ...
                    если вы хотите переместить только кнопку корзины, используйте '#product' вместо '#content > .row > .col-sm-4'
                */
                $('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div');
                // теперь перемещаем ее
                $('.moved-div').insertAfter('.thumbnails');
            } else {
                /*
                    если пользователь изменил ширину экрана и теперь ширина экрана больше 767 пикселей, и мы переместили область корзины раньше, переместим ее на место.
                */
                if($('.moved-div').length){
                    $('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div');
                }
            }
        }

        // запускаем функцию 
        moveCart();

        $(window).resize(function(){
            // запускаем функцию снова, если пользователь изменил размер экрана
            moveCart();
        })
    });
</script>

Ответ или решение

Ваша проблема с тем, что клавиатура на мобильном устройстве открывается и закрывается сразу после введения текста, может быть связана с тем, что вы переместили элементы интерфейса (в данном случае кнопку "Добавить в корзину" и опции) после загрузки страницы. Это может вызывать переотрисовку элемента, что, в свою очередь, приводит к закрытию клавиатуры.

Для решения данной проблемы, я предлагаю следующие шаги:

1. Изменение подхода к перемещению элементов: Вместо перемещения элементов после доступа к полям ввода, попробуйте изменить порядок HTML-кода непосредственно в шаблонах OpenCart, чтобы обеспечить нужное расположение элементов изначально, без использования JavaScript.

2. Условный вывод скрипта: Если вам все же необходимо использовать JavaScript для манипуляций с элементами, попробуйте добавить обработчик события, который будет удерживать фокус на поле ввода. Это поможет избежать изменения фокуса и, как следствие, лишнего открытия и закрытия клавиатуры.

Вот как можно изменить ваш код:

<script>
    $(function(){
        function moveCart(){
            if($(window).width() < 768 ){
                $('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div');
                $('.moved-div').insertAfter('.thumbnails');
            } else {
                if($('.moved-div').length){
                    $('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div');
                }
            }
        }

        function keepFocusOnInput(input) {
            $(input).focus(); // Удерживаем фокус на поле ввода
        }

        // Запускаем функцию перемещения
        moveCart();

        $(window).resize(function(){
            moveCart();
        });

        // Добавить обработчик для поля ввода
        $(document).on('focus', 'input[type="text"], textarea', function() {
            keepFocusOnInput(this);
        });
    });
</script>

3. Тестирование: После внесения изменений, тщательно протестируйте функциональность на различных мобильных устройствах и браузерах, чтобы убедиться, что проблема решена и пользовательский интерфейс работает корректно.

4. Оптимизация: Также рекомендуется проверить наличие других скриптов или CSS-правил, которые могут влиять на поведение клавиатуры и элементов управления. Попробуйте отключить их по одному, чтобы диагностировать потенциальные конфликтующие элементы.

Следуя указанным рекомендациям, вы сможете решить проблему с закрывающейся клавиатурой на мобильных устройствах и улучшить взаимодействие пользователей с вашим интернет-магазином на базе OpenCart.