Ого, это было сложно отлаживать.Похоже, в отладчике отсутствуют некоторые функции, такие как отслеживание источника события.
Проблема в WooCommerce.В частности, похоже, что WooCommerce устанавливает autofocus в поле ввода billing_last_name.Затем браузер автоматически прокручивает страницу, чтобы отобразить поле.
Можно надеяться, что есть опция конфигурации для отключения автофокуса, но, похоже, WooCommerce этого не обеспечивает.
Вы можете попробовать добавить это в свою тему
function disable_autofocus_firstname($fields) {
$fields['billing']['billing_first_name']['autofocus'] = false;
return $fields;
}
add_filter('woocommerce_checkout_fields', 'disable_autofocus_firstname');
Если это не сработает, вы можете создать правило CSS, чтобы скрыть поле имени биллинга, а затем запустить отложенную функцию JS, чтобы показать поле имени биллинга после полной загрузки страницы.
Как я отлаживал это
В соответствии с запросом ОП, и учитывая предложенную награду, я опишу, как я отлаживал это.
Я немного смущенчто я не просто сказал себе: «Хм, страница прокручивается до формы, курсор находится в первом поле формы, мне интересно, установлен ли на нем автофокус».К сожалению, я не являюсь в основном программистом внешнего интерфейса, и autofocus сначала не пришёл в голову.
Я начал с мысли, что его прокручивают с помощью JavaScript, либо явного вызоваФункция прокрутки или путем установки scrollTop на что-то.Я установил точку останова на событие scroll и попытался определить, где генерируется событие прокрутки.Хотя я нашел событие прокрутки, я не нашел его источника.Все, что я мог определить на этом этапе, это то, что событие прокрутки было нацелено на document, а не на что-то внутри него.
Я использовал monitorEvents для прослушивания событий на document инашел только 3, щелчок и 2 прокрутки, последняя из которых была вызвана функцией отложенной прокрутки вверх, вставленной OP, чтобы обойти первую прокрутку.Я установил точку останова на выполнение этого тайм-аута (не выполняя функцию) в попытке «разделить и завоевать», то есть посмотреть, происходила ли прокрутка до или после этого.Я сохранил эту точку останова до конца моих усилий по отладке.
Странная вещь состояла в том, что обычно страница не прокручивалась до достижения этой точки останова, но иногда это происходило.Я подумал, что это странно, и хотя я не знал, что с этим делать, это заставило меня искать что-то необычное.
Я попытался найти во всем JavaScript «прокрутку» и «обновление» (текст), чтобы найти дополнительные точки останова, чтобы установить, и установить кучу в JavaScript, который делал прокрутку, но ничего не произошло.
Я заметил, что было много JavaScript, динамически обновляющего страницу, и подумал, что, возможно, прокруткабыло из-за какого-то обновления.
Я попытался установить прослушиватель событий jQuery, который регистрировал все события в document (поскольку JS использовал настраиваемые события, не зарегистрированные в monitorEvents, и я уже определил, что document был целью события scroll), чтобы сгенерировать все события и посмотреть, было ли это какое-то пользовательское событие обновления.Было несколько пользовательских событий, и позже я сгенерировал события в консоли, чтобы посмотреть, прокрутится ли страница в ответ.Поскольку я не мог заставить страницу прокручиваться таким образом, я пришел к выводу, что события, скорее всего, зашли в тупик.
Я сменил тактику.Я посмотрел, куда прокручивалась страница, и увидел, что она прокручивает форму WooCommerce на место.Поэтому, остановившись на точке останова выполнения (описанной выше), я удалил всю форму WooCommerce из DOM и убедился, что страница больше не прокручивается.Это убедило меня, что какая бы проблема ни была, она была вызвана WooCommerce
К сожалению, мой Google Fu подвел меня, и я не сразу нашел проблему с помощью поиска Google.Вместо этого я обнаружил, как WooCommerce прокручивает страницу ошибок, чтобы убедиться, что сообщения об ошибках видны.Это привело меня к JavaScript.
Тем не менее, было много JavaScript, большая часть которого динамически создавала форму (локализовала ее на лету), а также куча немецкого языка (на котором я не говорю), и я не нашел никакого JavaScriptвызывая прокрутку.Я действительно хотел сузить, какой JS-файл вызывал прокрутку.
Chrome позволяет вам установить точку останова для «оператора первого сценария» (в разделе Точки прерывания прослушивателя событий -> Сценарии), поэтому я сделал это.Помимо остановки в первой строке каждого файла сценария, он останавливается в начале каждого тега <script> на странице.Я нашел этот тег сценария в нижней части страницы
<script type="text/javascript">
if(typeof jQuery == 'undefined' || typeof jQuery.fn.on == 'undefined') {
document.write('<script src="https://www.prored3.de/wp-includes/js/jquery/jquery.js"><\/script>');
document.write('<script src="https://www.prored3.de/wp-includes/js/jquery/jquery-migrate.min.js"><\/script>');
}
</script>
Странная вещь в этом теге сценария состояла в том, что прокрутка произошла сразу после обработки этого тега сценария, но jQuery уже был загружен, поэтому сценарий фактическиНичего не сделал.Я также смог подтвердить через консоль, что как до, так и после этого тега сценария (до и после прокрутки) DOM не был помечен как ready.Это означает, что все обработчики jQuery ready не были запущены к моменту прокрутки.Это исключает большую часть JavaScript и заставляет меня задуматься о том, почему прокрутка произошла после, но не до этого тега.
Я догадался, что внутренне браузер видел вызовы document.write и определил, что DOM не завершендо тех пор, пока он не передал этот тег, но как только он прошел, DOM был завершен, и он мог начать обрабатывать атрибуты уровня страницы.Это, наряду с более ранними наблюдениями, побудило меня более внимательно посмотреть на форму WooCommerce и обнаружить атрибут autofocus, установленный в поле billing_first_name.
Как ни странно, я не смог предотвратить прокрутку, удалив атрибут autofocus.Я не знаю почему, но я предполагаю, что это связано с внутренностями браузера и тем фактом, что DOM не был ready.Однако я смог предотвратить прокрутку, скрыв элемент billing_first_name in put с помощью CSS, что убедило меня в том, что причиной была прокрутка.
Добавление «автофокуса» к моему поиску в Google привело меня к другим жалобам на подобное поведение с WooCommerce, а объединение сообщений привело меня к PHP-решению, которое я разместил.