HTML 텍스트 영역에 줄 바꿈을 추가하는 방법은 무엇입니까?

<textarea>JavaScript로 편집하고 있습니다. 문제는 줄 바꿈을 할 때 표시되지 않는다는 것입니다. 어떻게해야합니까?

함수를 작성하는 데 가치가 있지만 줄 바꿈은하지 않습니다.

줄 바꿈 ( \n\r?)이 HTML <br/>태그 와 동일하지 않다는 사실에서 문제가 발생 합니다.

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

최신 정보

많은 의견과 내 경험에 따르면이 <br> 솔루션이 예상대로 작동하지 않는다는 것을 보여 주었 으므로 여기에 textarea'\ r \ n'을 사용하여 새 줄을 추가하는 방법의 예가 있습니다.

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

나는 이것이 너무나 대중적인 대답이 잘못되었거나 불완전하기 때문에 새로운 질문이 아닌 편집을하기로 결정했습니다.

일반 자바 스크립트를 사용하고 텍스트 영역 값에 문자열을 할당 해야하는 경우

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

당신은 교체해야 \n나 < br >에\\\n

그렇지 않으면 Uncaught SyntaxError: Unexpected token ILLEGAL모든 브라우저에서 제공 됩니다.

어쩌면 누군가 이것이 유용하다고 생각할 수도 있습니다.

서버 변수에서 javascript 변수로 전달 된 줄 바꿈에 문제가 있었고 javascript가 텍스트 영역에 기록했습니다 (nockout.js 값 바인딩 사용).

해결책은 새로운 줄을 두 번 탈출했습니다.

orginal.Replace("\r\n", "\\r\\n")

단일 이스케이프 문자로 자바 스크립트가 구문 분석되지 않았기 때문에 서버 측에서.

당신 \n은 linebreaks내부 에 사용해야 합니다textarea

자신의 페이지 안에 텍스트를 표시하려면 <pre>태그를 사용할 수 있습니다 .

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});

<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>

새 줄은 브라우저의 공백 일 뿐이며 일반적인 공백 ( "")과 다른 것으로 취급되지 않습니다. 새 줄을 얻으려면 <BR />요소 를 삽입해야합니다 .

문제를 해결하기위한 또 다른 시도 : 텍스트를 텍스트 영역에 입력 한 다음 단추 뒤에 JavaScript를 추가하여 보이지 않는 문자를 읽을 수있는 문자로 변환하고 결과를로 덤프하십시오 DIV. 브라우저가 원하는 것을 알려줍니다.

ID가 #infoartist 인 textarea가 있습니다 .

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

자바 스크립트 코드에서 텍스트 영역의 값을 가져 와서 새 줄 (\ n \ r) <br />을 다음과 같이 태그로 대체합니다 .

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

따라서 jquery를 사용하는 경우 (나 같은) :

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

그것이 당신을 도왔기를 바랍니다. :-)

줄 바꿈으로 testarea 값을 서버에 보내야하는 경우 nl2br 을 사용하십시오.

여기 내가했던 같은 문제에 대해 한 일이 있습니다.

jsp의 다음 페이지로 텍스트를 전달할 때 다음과 같은 것을 읽는 대신 텍스트 영역으로 읽습니다.

그래서 원하는대로 출력이 나왔습니다. 다른 속성의 경우 다음과 같이 사용할 수 있습니다.

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>