Теги к постам

[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]

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

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



Я пытаюсь вставить эти выделенные опшены в этот блок, который для юзеров показывает, что выбрано (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, 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/we...ycle-api?hl=ru
https://developer.mozilla.org/en-US/...pageshow_event

[firep91613]

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

[firep91613]

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



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