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
    25 июн 2022 в 14:18
  • Не только по нажатию на энтр, а еще в случае если CTRL+V. Не знаю как проще использовать, может и без jquery, не знаю как проще. Я пробовал с jquery циклом с условием перебирать каждый символ charAt() но это не работает
    – Vlad
    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
    28 июн 2022 в 12:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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