Как отобразить информацию из поля комментариев текстового поля на текущей странице html

Question

Я пытаюсь взять информацию, которую пользователь помещает в мое поле для комментариев, а затем просто ввести ее под этим полем.

Как простое поле для комментариев, в котором отображается имя пользователя и комментарий этого человека ниже это.

Просто на той же начальной index.html странице нормально не пытаться отправить ее на сервер или что-то в этом роде.

Самый простой способ сделать это с javaScript?

Я попытался получить document.getElementByID() всей формы, а затем выполнить отправку, но не работает?

Answer 1

Вы помещаете идентификатор в элемент ввода, а затем вы можете получить информацию с помощью element.value

Ниже приведен пример: любой текст, который вы вводите в поле ввода, будет скопирован в div

document.getElementById("input").addEventListener("input", e => {
  document.getElementById("output").innerText = e.target.value;
});

<div id="output"></div>
<input id="input"></input>

И пример, если они нажимают кнопку

function foo() {
  document.getElementById("output").innerText = document.getElementById("input").value;
}

<input id="input"></input>
<div id="output"></div>
<button onclick="foo()">Copy text</button>

Answer 2

Вы можете вытянуть .value текстового поля в любой элемент, на который вы нацеливаетесь. Следует сделать одно важное замечание: поскольку элементы HTML не учитывают разрывы строк как фактические разрывы строк в своем текстовом содержимом, вы, вероятно, захотите включить быстрое регулярное выражение, чтобы заменить все разрывы строк тегами <br>, и другое регулярное выражение для замены каждого экземпляра нескольких пробелов несколькими пробелами   для сохранения нескольких пробелов.

В качестве альтернативы, если вы хотите избежать замены какого-либо регулярного выражения, вы можете просто применить свойство CSS white-space: pre; к любому элементу, в который вы выводите текст, и он будет учитывать любой переданный ему интервал, будь то разрывы строк или множественные пробелы между словами.

1. Вот пример (с регулярным выражением) :

const textarea = document.querySelector('textarea');
const div = document.querySelector('div');
textarea.addEventListener('input', function(e) {
    div.innerHTML = e.target.value.replace(/(?:\r\n|\r|\n)/g, '<br>').replace(/  +/g, m => " " + Array(m.length).join('&nbsp;'));
});

html {
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    margin: 0;
    padding: 20px;
    height: inherit;
    box-sizing: border-box;
}
body > * {
    position: relative;
    -webkit-appearance: none;
    width: calc(50% - 10px);
    height: 100%;
    padding: 20px;
    border-width: 0;
    background-color: #ccc;
    box-sizing: border-box;
}

<textarea></textarea>
<div></div>

Интерактивный пример CodePen: https://codepen.io/brandonmcconnell/pen/2177e440bb55f5a7f035ebcd315a1bdf

2. Вот тот же пример (с white-space: pre;, без регулярного выражения) :

const textarea = document.querySelector('textarea');
const div = document.querySelector('div');
textarea.addEventListener('input', function(e) {
    div.innerHTML = e.target.value;
});

html {
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    margin: 0;
    padding: 20px;
    height: inherit;
    box-sizing: border-box;
}
body > * {
    position: relative;
    -webkit-appearance: none;
    width: calc(50% - 10px);
    height: 100%;
    padding: 20px;
    border-width: 0;
    background-color: #ccc;
    box-sizing: border-box;
}
div {
    white-space: pre;
}

<textarea></textarea>
<div></div>

Интерактивный пример CodePen: https://codepen.io/brandonmcconnell/pen/0be96bb4ec0168deda587328180cca86