Теги к постам

[firep91613]

Ребят, написал скрипт, для прицепления тегов к постам - https://jsbin.com/losuzaxore/edit?js,output

У меня вопрос: вот когда нажимаешь в браузере назад, а потом обратно, то у оригинального селекта опшены остаются выбраными как и до нажатия назад. А сами эти теги вставленные в .selected__items исчезают. Что нужно делать? Сразу искать у оригинального селекта все выбраные опшены и вставлять в .selected__items? Или можно как-то еще это регулировать?

[firep91613]

Ребят, неужели никто с этим не сталкивался?

https://adminlte.io/themes/v3/pages/forms/advanced.html

Как они делают, что все что выбранно в элементах форм при нажатии "Назад" - "Вперед" в браузере остается так же как и было? А при перезагрузке страницы все обнуляется? В стораджи ничего не пишется...

[ksa]

Как они делают
Это лучше у них и спросить... ;)

[Nexus]

Это же, вроде как, особенность работы самого браузера.
Хром старается сохранить данные введенные в поля при перемещении пользователя по истории вкладки при синхронной загрузке этих страниц.

[firep91613]

Это же, вроде как, особенность работы самого браузера.
Хром старается сохранить данные введенные в поля при перемещении пользователя по истории вкладки при синхронной загрузке этих страниц.

Ок. Вот я выделил теги и нажал "Назад" и "Вперед". На скрине они выделены, как и было.

https://i.ibb.co/1WHyF76/Screenshot-from-2025-06-20-22-02-01.png (https://imgbb.com/)

Я пытаюсь вставить эти выделенные опшены в этот блок, который для юзеров показывает, что выбрано (class="selected__items"). Вот скрипт:

document.addEventListener('DOMContentLoaded', e => {
const select = document.getElementById('tag_id');
const length = select.options.length;

for (let i = 0; i < length; i++) {
console.log(select.options[i].selected); // все время false

if (select.options[i].selected) {
selectedItems.append(createTag(i, select.options[i].innerText));
}
}
});

Но консоль все время пишет false...

Что же делать? Как же быть?

[firep91613]

Это лучше у них и спросить... ;)

Ага, так они и скажут )

[Nexus]

Что же делать? Как же быть?
select.value пробовали читать?

Ага, так они и скажут )
Можете не спрашивать, а посмотреть реализацию в оф. репозиториях: Chromium (https://github.com/chromium/chromium), Firefox (https://github.com/mozilla-firefox/firefox).

[voraa]

Что же делать? Как же быть?
Вместо события DOMContentLoaded в данном случае надо использовать событие 'pageshow'
window.addEventListener("pageshow", (ev) =>{
const select = document.getElementById('tag_id');
const length = select.options.length;

for (let i = 0; i < length; i++) {
console.log(select.options[i].selected); // все время false

if (select.options[i].selected) {
selectedItems.append(createTag(i, select.options[i].innerText));
}
}
});

Оно возникает, когда страница уже появилась и данные были восстановлены из внутреннего кеша (если они были запомнены)
Можно и проверять были ли данные восстановлены из кеша или страница полностью загрузилась заново.
ev.persisted === true, если страница была восстановлена из кеша.
Подробнее
https://developer.chrome.com/docs/web-platform/page-lifecycle-api?hl=ru
https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event

[firep91613]

voraa,
спасибо, это помогло. Правда я совсем забыл, что на админке висит middleware, который запрещает браузеру кэшировать страницы. Поэтому e.persisted всегда false. Но тем не менее работает как надо.

[firep91613]

Помогите еще курсор сделать на всю высоту. У меня никак не получается... Я пробовал увеличивать font-size, но получается криво все.

https://i.ibb.co/Ndrmhxnn/Screenshot-from-2025-06-21-16-42-15.png (https://imgbb.com/)

https://jsbin.com/zakemetefi/edit?css,output

[voraa]

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

[firep91613]

voraa,
получилось :)

https://i.ibb.co/0yqc42dc/Screenshot-from-2025-06-23-22-34-31.png (https://imgbb.com/)