Поковырял я ваши вопросы. Есть решение, но смысл, если Вы будете спрашивать каждый раз, когда сталкиваетесь с трудностями? Подумайте немножко. Воспользуейтесь режимом отладки. Там не сложно. Если я Вам дам решение вопросов, которые Вы задаёте, то там будет другая проблема. Вы потом обратитесь с ней?
Да, каретка смещается из-за пробелов.
И del Не работает из-за них же.
Новая проблема - если вводить цифры "из середины" то каретка смещается по мере ввода.
Ну, у вас же практически всё есть. При первичном клике проверйте наличее класса. Если его нет - делайте preventDefault, и добавляйте класс, раскрывайте список. А если есть класс - то убирайте его и не делайте preventDefault.
Профит
BakytShark, при этом СУПЕР точности Вам не добиться. Если до срабатывания таймера будет много секунд, а пользователь покинет вкладку(переключится на другую) то браузер(Хром) в целях оптимизации расхода ресурсов будет периодически усыплять некоторые процессы. Что в случае таймеров приводит к некорректному отсчёту секунд. Скажем, одна секунда будет длиться 2-3 тика счётчика. Аналогично если что-то заблокирует поток выполнения JavaScript(подвиснет браузер, пользователь запустит тяжёлое вычисление на этой же вкладке и тд и тд).
Максим Иванов, В общем и целом, я бы рекомендовал Вам хорошенько изучить и гриды и флексы. Уже после этого станет легче решать когда где и что использовать. Какого то общего ответа тут скорее всего нет. Нужно рассматривать на каждом отдельно взятом случае.
Ramil_ Bayramov_, решает конечно. Речь про количество колонок, перестановку блоков местами и так далее.
На флексах Вам нужно будет создать дополнительный уровень абстракции на css - контейнер, строки и коллонки. Описать для них ряд правил.
Потом добавлять разным html элементам соответствующие классы и делать дополнительные обёртки.
На гридах это делается одной css строчкой на родительском элементе. И так же одной строчкой адаптируется на нужном Вам брэйкпоинте.
Максим Иванов, гриды достаточно сложная концепция. Если Вы считаете что можете сделать это быстрее на флексах и это будет так же легко поддерживать - делайте пожалуйста.
Уверен найдётся кто-то кто сделает ещё быстрее эту же задачу на третьем бутстрапе, где всё на флоатах.
Это вопрос опыта и удобства.
Есть моменты, где гриды выигрывают. Например, намного легче делать адаптив. Киллер фича гридов, как по мне - когда дизайнер рисует адаптивный интерфейс на десктопе\планшете\мобилке так, что блоки меняются местами настолько, что это удобно сделать только на гридах с помощью template-area. На флексах часто бывает жутко сложно решить подобное. А то и вовсе без js не обойтись.
nazariy228, не стоит стесняться. Все когда то были новичком. Однако, прежде стоит всё же гуглить. Как правило, все вопросы новичков ищутся в сети за 1 минуту.
1) По умолчанию позиционирование текста не влияет на выделение
2) Лучше предоставлять ваше решение в песочнице чтобы можно было сразу посмотреть что Вы наделали и как это решить
3) Вангую что никому и никогда не понадобится выделять этот текст.
Ну так оно так и делается. В зависимости от выбранного подхода, у Вас данные о товарах либо на клиенте обрабатываются и строятся все ссылки, либо на бэкенде это делает php и потом отдаёт готовую разметку. Таким образом, для каждого товара будет сгенерирована ссылка с названием товара, а для каждой страницы товара на основе тех же данных нужно название товара пропихнуть в название страницы. Профит.
Или я что-то не так понял?