Как создать динамическую / модульную трехкомпонентную форму ввода с помощью HTML, JavaScript и Bootstrap
У меня не было успеха в исследовании этой проблемы, поэтому извиняюсь за то, что я не смог кратко ее описать.
По сути, я создаю веб-сайт, на котором пользователи могут отправлять «рецепты» с помощью формы html> php. Тогда я хотел, чтобы пользователи могли динамически добавлять или вычитать шаги или ингредиенты (я видел это на других сайтах, но мне не удалось найти простое решение на чистом js).
В любом случае, я построил что-то похожее на то, что хотел (пример здесь, JavaScript здесь), но я не уверен, что это такое отличное решение. Чтобы получить информацию о форме, php-код в основном перебирает идентификаторы материалов и шагов, пока не достигнет последнего.
Хотя это решение работает, я столкнулся с еще двумя проблемами:
Во-первых, текст для каждого ввода сохраняется в массиве js каждый раз, когда пользователь вводит - таким образом новые вводы могут быть добавлены или удалены без потери текста. Однако при создании нового элемента ввода, если предыдущий текст был слишком длинным, он обрезается.
Во-вторых, для раздела ингредиентов я хотел бы иметь элемент, в котором пользователи могут выбирать только стандартные измерения (например, мг, г, кг ...), а затем другой для числового количества. Я пробовал классы входной группы Bootstrap, но интервал получается очень странным и вообще не работает на мобильных устройствах. Есть ли лучший способ добиться этого? Это также полностью усложняет мое исходное решение, поскольку теперь входов будет в 3 раза больше.
@SlinkySloth Я знаю, но не знаю, как сделать его более ясным или кратким, что является частью моей проблемы. Примеры, которые я опубликовал, относятся к моему текущему решению, и я думал, что они достаточно описывают то, что я пытался достичь. Не могли бы вы взглянуть на эту первую ссылку и дать мне представление о том, как продолжить описание моей проблемы? Приносим извинения за беспокойство.
Что касается вашей первой проблемы, я пробовал ваш пример в последних версиях Firefox, Chrome и Edge. Такой проблемы не возникает, или, по крайней мере, я ее не замечал. Через сколько символов вы заметили, что текст обрывался? Что касается вашей второй проблемы, вы можете использовать поля и отступы Bootstrap, а также вертикальное и горизонтальное выравнивание вместе с группой ввода (пожалуйста, внимательно прочитайте ссылка на сайт, ссылка на сайт и ссылка на сайт)
Это действительно странно, я тоже не мог воссоздать проблему ... но я замечал это несколько раз. Придется продолжить расследование. И спасибо также за ссылки, думаю, мне следовало бы для начала поискать более внимательно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Вы ведь понимаете, насколько расплывчатый ваш вопрос, не так ли? Другими словами: каких ответов вы ожидаете получить? Размещение вопроса с заголовком «как создать ...» означает, что вы ждете, что кто-то ответит с гидом? (!) Сначала вы начинаете описывать архитектуру вашего решения проблемы, сравнивая ее с найденным вами примером, который вам, кажется, не нравится. Во-вторых, вы указываете две незначительные проблемы, которые вы сможете решить, если действительно поняли код. Подводя итог, ваш вопрос самый неясно. Пожалуйста, определите проблему, разделите ее на подзадачи и исправьте.