0

введите сюда описание изображенияЕсть код, необходимо в text area вводить текст, он переносится в div и если в text area перейти на новую строку в div в конец КАЖДОЙ строки добавляется символ к примеру "P"

тоесть если у нас будет 15 строк в text area в div должны отображаться все эти 15 строк с символом "Р" в конце

UPD на скриншоте моя очередная попытка, не работает

document.addEventListener('input', function (e) {
  document.querySelector("div").textContent = document.querySelector("textarea").value;
})
textarea, div {
  font-family: monospace;
  font-size: 1rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid;
  padding: .5em;
}

textarea {
  margin-bottom: 1em;
  height: 7em;
}

div {
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
<textarea autofocus></textarea>
<div></div>

2
  • Не очень понял вопрос, вам нужно чтобы по нажатию на энтр, в конце строки добавлялся какой-то символ? А причём тут jquery, вы же через нативку пишите?
    – Tampambro
    Commented 25 июн. 2022 в 14:18
  • Не только по нажатию на энтр, а еще в случае если CTRL+V. Не знаю как проще использовать, может и без jquery, не знаю как проще. Я пробовал с jquery циклом с условием перебирать каждый символ charAt() но это не работает
    – Vlad
    Commented 28 июн. 2022 в 9:59

1 ответ 1

1

Как вариант, разделить строку на массив по признаку конца строки. К каждому элементу добавить "P". Объединить массив в строку и вывести

document.addEventListener('input', function (e) {
  const text = document.querySelector("textarea").value || '';
  const lines = text.split(/\r?\n/);
  let resultText = '';
  lines.forEach((line) => {
    resultText += line + 'P' + '\n';
  });
  document.querySelector("div").textContent = resultText;
})
textarea, div {
  font-family: monospace;
  font-size: 1rem;
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid;
  padding: .5em;
}

textarea {
  margin-bottom: 1em;
  height: 7em;
}

div {
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
<textarea autofocus></textarea>
<div></div>

1
  • Вот это решение, большое спасибо!
    – Vlad
    Commented 28 июн. 2022 в 12:01

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.