@prohodil_mimo

Как сделать чекбоксы внутри произвольного текста в HTML, CSS, Javascript?

Добрый вечер!
Пишу небольшой тодо лист на электроне, возник вопрос - как можно вставить чекбоксы внутрь произвольного текста?
Т.е. идея такая - я ввожу какой-то абзац текста и по желанию к нему ставлю слева чекбокс ([ ] - это типа чекбокс):

[ ] Помыть посуду
[ ] Сделать что-то такое длинное,
что оно не влазит в одну строку,
иллюстрируя тот факт, что
чекбокс привязан не к строке, а
к абзацу
А тут просто абзац, без чекбокса


Если у кого-то есть телефон от Xiaomi, то у них есть отличное приложение Заметки с таким функционалом.

Буду рад идеям или готовому решению на HTML, CSS, Javascript. Спасибо.

P.S. Была идея делать таблицу, в левой колонке чекбоксы, в правой - текст, при работе с текстом (например, нажатие на энтер) - создание новой строки и т.п. Но всё же громоздко и ограниченно. Может, кто-то знает другие решения?

P.P.S. Перечитал свой вопрос, на всякий случай уточню, что имеется ввиду именно ввод текста пользователем, а не создание статической страницы с чекбоксами внутри текста. Т.е. что-то вроде textarea, внутри которого можно не только писать текст, но и вставлять связанные с частями текста чекбоксы.
  • Вопрос задан
  • 332 просмотра
Решения вопроса 1
lam0x86
@lam0x86
<blockquote contenteditable="true">
<input type="checkbox"> Помыть посуду<br>
<input type="checkbox"> Сделать что-то такое длинное,<br>
что оно не влазит в одну строку,<br>
иллюстрируя тот факт, что<br>
чекбокс привязан не к строке, а <br>
к абзацу<br>
А тут просто абзац, без чекбокса
</blockquote>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@BitRouter
Вариант А:
создать конструктор "формы" где у пользователя по клику на кнопку "вставить чекбокс" будет устанавливатся данный элемент в текст.
примечание: нужно отлавливать фокус перед нажатием на кнопку.

Вариант В:
можно регуляркой искать ключевую фразу при вводе текста
Ответ написан
Комментировать
INPVLSA
@INPVLSA
Типо Full-Stack
Такое реализовано в Evernote.

Насколько мне известно там чекбоксы представлены картинками с атрибутом "checked". И при нажатии атрибут приобретает значение true.

Вперед исследовать =)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы