IT

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

lottoking 2020. 6. 11. 07:59
반응형

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


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

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


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

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

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

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

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

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


당신 \nlinebreaks내부 에 사용해야 합니다textarea


어쩌면 누군가가 이것을 유용하게 사용할 수 있습니다

서버 변수에서 javascript 변수로 전달 된 줄 바꿈에 문제가 있었고 javascript는 텍스트 영역에 knockout.js 값 바인딩을 사용하여 작성했습니다.

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

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

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


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

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


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

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});
<textarea placeholder="type text here"></textarea>
<pre>
The
new line will
be respected
</pre>


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>

참고 URL : https://stackoverflow.com/questions/863779/how-to-add-line-breaks-to-an-html-textarea

반응형