HTML 텍스트 영역에 줄 바꿈을 추가하는 방법

HTML 텍스트 영역에 줄 바꿈을 추가하는 방법

편집 중입니다.<textarea>자바스크립트와 함께.문제는 제가 줄을 끊으면 표시가 안 된다는 거예요.이거 어떻게 해요?

함수를 쓸 수 있는 값을 받고 있지만 줄이 끊어지지는 않습니다.

문제는 선이 끊어진다는 사실에서 비롯됩니다 (\n\r?) HTML과 같지 않습니다.<br/>태그:

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

많은 댓글들과 저 자신의 경험이 저에게 이것을 보여주었기 때문에<br>솔루션이 예상대로 작동하지 않습니다. 여기 a에 새 줄을 추가하는 방법의 예가 있습니다.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.

그렇지 않으면 Uncatched SyntaxError: 모든 브라우저에서 예기치 않은 토큰이 불법입니다.

서버 변수에서 자바스크립트 변수로 전달되는 줄 바꿈에 문제가 있었는데 자바스크립트에서 텍스트 영역에 쓰고 있었습니다(Knockout 사용).JS 값 바인딩).

해결책은 새로운 줄을 이중으로 탈출하는 것이었습니다.

original.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>

ID가 #infoartist인 텍스트 영역은 다음과 같습니다.

<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 />');

새 줄은 브라우저의 공백일 뿐이며 일반 공간("")과는 다르게 취급되지 않습니다.새 줄을 가져오려면 다음을 삽입해야 합니다.<BR />요소들.

문제 해결을 위한 또 다른 시도:텍스트 영역에 텍스트를 입력한 다음 단추 뒤에 자바스크립트를 추가하여 보이지 않는 문자를 읽을 수 있는 것으로 변환하고 결과를 다음에 덤프합니다.DIV. 그것은 당신의 브라우저가 무엇을 원하는지 알려줄 것입니다.

텍스트 영역의 값을 줄 바꿈과 함께 서버로 전송해야 하는 경우 nl2br을 사용합니다.

제가 겪었던 것과 같은 문제에 대해 한 일이 여기 있습니다.

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

<s:property value="%{text}"/>

그래서 결과물은 당신이 원하는 대로 나왔습니다.

그리고 기타 속성은 아래와 같이 사용할 수 있습니다.

<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