줄 바꿈하는 여러 줄 입력 또는 텍스트 영역을 가져 오는 방법은 무엇입니까?

Question

html로 인쇄 할 때 정확하게 보이는 레이아웃을 얻으려고합니다.

 
Comments: _____________________________________________ 
_______________________________________________________

... 밑줄 친 부분이 —라는 단일 입력 태그 인 경우 텍스트 영역이나 사용자가 텍스트를 입력하고 인쇄 할 수있는 한 다른 것.

요구 사항 :

"Comments"텍스트 은 입력 텍스트의 첫 번째 줄과 같은 줄에 있어야합니다.
• 텍스트 영역에 단어 "주석"을 넣을 수는 없습니다.
• 여러 개의 텍스트 입력을 사용할 수 없습니다.
• 을 인쇄 할 때 두 입력 줄에 밑줄을 긋아야합니다. 인쇄하기 전에 제출 한 페이지에는 셀 수 없습니다. 클라이언트 측 거의 모든 작업을 수행했습니다.

왜냐하면 브라우저에서 페이지를 인쇄 할 때 외부 회사의 종이 문서를 시각적으로 다시 만들어서 정확하게 일치시켜야하기 때문입니다. 이것은이 회사와 함께 나를 앞서는 내부 "양식"시스템의 일부입니다. 이러한 양식은 브라우저에서 자동으로 여백과 헤더가 조정되므로 설정되므로 문제가되지 않습니다. 이 html을 얻으려면 가이어야합니다.

Answer 1

상대적으로 위치한 div를 사용해보십시오. 절대적으로 다른 div와 함께 텍스트 영역이 포함됩니다.

<div id="outer" style="position: relative"> 
    <textarea id="txtArea" style="text-decoration: underline;"></textarea> 
    <div style="position: absolute; left: 5px; top: 5px;">Comments:</div> 
</div> 

원하는 효과를 얻으려면 텍스트 영역의 스타일을 지정해야합니다.

Answer 2

저는 HTML과 CSS만으로는 불가능하다고 확신합니다. (누군가 두 줄 모두에 텍스트를 입력 할 수있게하려는 경우). 유일한 멀티 라인 입력은 텍스트 영역이며 정사각형이어야합니다.

TinyMCE 스타일 편집기 상자가있는 자바 스크립트 속임수를 사용하고 javascript를 사용하여 "코멘트 :"텍스트를 처음부터 그대로두고 텍스트를 입력 할 때 텍스트에 자동으로 밑줄을 표시하도록 할 수 있습니다. 외모를 모방하다.

Answer 3

인쇄용으로 별도의 스타일 시트를 사용하고 인쇄 할 때 텍스트 영역을 잃어 버리고 인쇄 표시를 위해 모든 것을 설정하면됩니다.

인쇄를 위해 새 페이지의 요소를 변경하여 실행할 수있는 일부 자바 스크립트가 필요하지만 큰 문제는 아닙니다.

그런 다음 원하는 형식 및 모든 항목의 배치로 여러 div를 사용할 수 있습니다.

또 다른 옵션은 페이지를 pdf로 변환하는 인쇄 버튼을 클릭하는 것입니다. 서버 측에서 가지고있는 것에 따라 몇 가지 옵션이 있습니다.요소에

text-indent:5em; /* or whatever works... */ 

: 그냥 할 다음과 (와 밑줄 '의견'을)를

Answer 4

하지 당신은 당신이 필요가있는 텍스트 상자에 배경 이미지를 넣을 수 있습니까? 사람들이 배경 이미지를 허용하지 않도록 인쇄 설정을 설정하는 데 문제가있을 수 있습니다. 그게 문제인지 잘 모르겠습니다. 또한 IE에서 텍스트 들여 쓰기가 작동하는지 잘 모르겠습니다. 현재 Mac에 있으며 FF와 Safari에서 작동합니다.

편집 : IE7 및 IE8에서 작동합니다.

Answer 5

쉬운 방법은 없지만 레이블을 텍스트 필드 위에 표시하고 텍스트 필드에 텍스트 들여 쓰기를 시도 할 수 있습니다. 또는 자바 스크립트를 통해 기본값을 지정합니다.

가장 쉬운 방법은 JavaScript 또는 CSS ": before"의사 선택기가 필요하며 어느 방법도 브라우저 간 호환이 불가능합니다.