HTML 텍스트 영역은 무엇을 의미합니까? textarea 태그에서 줄 바꿈과 공백을 얻는 방법은 무엇입니까?

html textarea 무슨 뜻인가요? textarea 태그에서 줄 바꿈과 공백을 얻는 방법은 무엇입니까? 이 글에서는 주로 html 텍스트 영역의 정의와 사용법, 그리고 속성에 대한 자세한 설명을 다루고 있습니다.

html 텍스트 영역 정의 및 사용법:

태그는 여러 줄의 텍스트 입력 컨트롤을 정의합니다.

텍스트 영역에는 텍스트를 무제한으로 담을 수 있으며 텍스트의 기본 글꼴은 고정 너비 글꼴(일반적으로 Courier)입니다.

cols 및row 속성을 통해 텍스트 영역의 크기를 지정할 수 있지만 더 좋은 방법은 CSS height 및 width 속성을 사용하는 것입니다.

참고: 텍스트 입력 영역에서 텍스트 줄을 구분하려면 "%OD%OA"(캐리지 리턴/줄 바꿈)를 사용하세요.

팁: 태그의 줄 바꿈 속성을 통해 텍스트 입력 영역에서 줄바꿈 모드를 설정할 수 있습니다.

HTML 태그 예:

PHP 중국어 웹사이트에서 필요한 모든 웹사이트 구축 튜토리얼을 찾을 수 있습니다.

html 텍스트 영역 속성:

HTML에서 텍스트 영역 속성 및 사용법 태그 지정:

1.cols, 세로 열. 스타일 시트를 설정하지 않고 한 줄에 들어갈 수 있는 바이트 수를 나타냅니다. 예를 들어 cols=60은 한 줄에 최대 60바이트(한자 30자)를 포함할 수 있음을 의미합니다. 또 한 가지 주목할 점은 이를 통해 텍스트 상자의 너비가 조정된다는 점입니다. cols의 값을 입력한 후 입력 텍스트 글꼴의 크기를 정의(정의하지 않은 경우 기본값이 사용됨)한 다음 너비를 조정합니다. 텍스트 상자가 결정됩니다.

2.행, 가로 열. 표시할 수 있는 행 수를 나타냅니다. 예를 들어, 행=10은 10개의 행을 표시할 수 있음을 의미합니다. 줄이 10개 이상인 경우 스크롤 막대를 끌어서 찾아보아야 합니다.

3.name, 텍스트 상자의 이름, 텍스트를 저장할 때 반드시 사용해야 하기 때문에 필수입니다.

4.warp, warp="off"는 텍스트 영역이 자동으로 줄 바꿈되지 않음을 의미합니다. 물론 쓰지 않으면 기본적으로 자동으로 줄 바꿈됩니다. 이 매개변수는 일반적으로 덜 자주 사용됩니다.

5.style, 텍스트 상자의 배경색, 스크롤 막대 색상 및 형태, 테두리 색상, 입력 글꼴 크기 및 색상 등을 설정하는 데 사용할 수 있는 매우 실용적인 매개변수입니다.

6.class는 일반적으로 외부 CSS에서 설정을 호출하는 데 사용됩니다.

textarea 태그에서 줄바꿈 및 공백 가져오기:

질문: textarea 태그에서 형식(줄바꿈, 공백)을 가져와 데이터베이스에 저장하고 표시할 때 기본 형식을 유지합니다.

해결책:

IE9 이상, FF 및 크롬에서는 줄을 n으로 변경합니다. IE7-8에서는 줄을 rn으로 변경하고 공백은 모두 s

따라서 n과 크롬을 바꾸려면 바꾸기를 사용해야 합니다. 다른 브라우저에서 html 코드 를 사용하여 s 공백을 html 로 바꾸세요.

참고: jQuery의 val()을 사용하여 텍스트 영역의 값을 가져오는 경우 가져온 값에 캐리지 리턴(r) 문자가 포함되지 않습니다. . 그러나 값이 XHR을 통해 서버에 전달되면 캐리지 리턴(r) 문자가 유지됩니다(또는 브라우저에 의해 추가되지만 캐리지 리턴(r)은 원본 데이터에 포함되지 않습니다).

이 예에서는 r과 rn 모두에 대체를 사용합니다. 실제 효과는 영향을 받지 않습니다. 차이점에만 주의하면 됩니다.

코드는 다음과 같습니다.

html:

<textarea name="" id="text" cols="30" rows="3"></textarea>
<input type="button" id="btn" value="测试测试" />
<div id="show"></div>

js:

document.getElementById("btn").onclick = function() {
var strContent = document.getElementById("text").value;
alert("处理前的strContent为\r\n"+strContent);
strContent = strContent.replace(/\r\n/g, &#39;<br/>&#39;); //IE9、FF、chrome
strContent = strContent.replace(/\n/g, &#39;<br/>&#39;); //IE7-8
strContent = strContent.replace(/\s/g, &#39; &#39;); //空格处理
alert("转换之后的html代码为\r\n"+strContent);
document.getElementById("show").innerHTML = strContent;
};

[관련 권장 사항]

HTML의 lang 속성은 무엇을 위한 것인가요? HTML의 lang 속성은 무엇을 합니까?

HTML5의 새로운 구조 요소는 무엇입니까? HTML5의 새로운 구조 요소 사용(권장)

위 내용은 HTML 텍스트 영역은 무엇을 의미합니까? textarea 태그에서 줄 바꿈과 공백을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!