Добавление текстовой области к другой текстовой области при нажатии клавиши

Я пытаюсь создать проект в стиле Medium, в котором нажатие ввода в текстовом поле создаст после него другое текстовое поле.

Я пытался использовать jQuery с append() и html(), но ни один из них не увенчался успехом.

Это метод, который у меня сейчас есть:

  $('textarea').keypress(function(event)
  {
      if (event.keyCode == 13)
      {
          event.preventDefault();
          $('textarea').append("<textarea>New Textarea</textarea>");
      }
  });

Как мне это сделать?

$('textarea') выбирает все элементы textarea, что подходит для настройки события, но внутри события вам нужно выбрать конкретный элемент, связанный с событием, вместо повторного выбора всех текстовых областей.
Chris Rollins 12.05.2019 07:15
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
52
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Используйте after:

$("textarea").keypress(function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
        $(this).after("<textarea>New Textarea</textarea>");
    }
});

Работает как шарм, спасибо! Вы знаете, как бы я переместил фокус на новую текстовую область?

Navwhal Guy 12.05.2019 07:17

Используйте insertAfter вместо append

$('<textarea>New Textarea</textarea>').insertAfter(this);

Вы можете использовать событие onkeypress, чтобы добавленное textarea также имело это событие. Используйте after для добавления элементов HTML после.

$('body').on('keypress', 'textarea', function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    $(this).after("<textarea>New Textarea</textarea>");
  }
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea>New Textarea</textarea>

Другие вопросы по теме