텍스트 영역 자동 크기 조정 (복수 라인 asp : 텍스트 상자)

Question

나는 css를 통해서만 모든 내용을 자동 크기로 맞추기 위해 다중 라인 asp : Textbox (비 ASP 사용자를위한 표준 HTML 텍스트 영역)를 가지고 있습니다. 그 이유는 웹 브라우저에서 스크롤을 사용 가능하게 지정 높이로 지정하기 위해서입니다.

그러나 인쇄 스타일 시트를 구현했으며 오버플로가 숨겨진 상태로 인쇄 될 때 텍스트 영역에있는 모든 텍스트를 표시하려고합니다.

필자는 수동으로 print.css 파일 문제의 텍스트 영역 높이를 지정할 수 있습니다.이 문제는 필드가 선택 사항이며 350px 빈 상자가 최적이 아니며 항상 이보다 많은 양의 텍스트가있을 가능성이 있습니다.

IE와 파이어 폭스에서

height: auto; 
height: 100%; 

각각 아직이 어떤해야 형태의 HTML 마크 업에서 지정된 행 수의 존재에 의해 오버라이드 (override) 할 것 ...

내가 사용 시도 asp : Textbox 태그에서 높이를 지정하지 않으면. NET에서 생성됩니다.이 태그는 numercial 측정 값만을 허용하는 것으로 보입니다. su ch로 px 등 ...

어떤 아이디어?

Answer 1

(css 솔루션)을 요청할 수 없습니다.

텍스트 영역의 내용은 html 요소가 아니므로 css에서 텍스트 영역의 크기를 계산하는 데 사용할 수 없습니다.

작동 할 수있는 유일한 방법은 Javascript입니다 (예 : Javascript). scrollHeight 속성을 읽고이를 사용하여 요소의 높이를 설정합니다. 여전히 scrollHeight 속성은 비표준이므로 모든 브라우저에서 작동하지 않을 수 있습니다.

Answer 2

jQuery를 또는 자바 스크립트 함수가 발견하고 더 큰 텍스트 상자가 최선의 해결책이 될 수 있도록 - 적어도 내가

우리가 함수의 집합을 사용하여 페이지가로드 된 후 깨끗한 형태로 전화를 발견 이잖아 (나는 이것을 알고 여기서는 최상의 솔루션이 아닙니다. 그리고 더 우아한 jQuery 솔루션으로 전송하기 위해 노력하고 있습니다) - 한 노트는 텍스트 영역에 행과 열이 지정되었는지 또는 제대로 작동하지 않는지 확인합니다.

function countLines(strtocount, cols) 
{ 
    var hard_lines = 1; 
    var last = 0; 
    while (true) 
    { 
     last = strtocount.indexOf("\n", last + 1); 
     hard_lines++; 
     if (last == -1) break; 
    } 
    var soft_lines = Math.round(strtocount.length/(cols - 1)); 
    var hard = eval("hard_lines " + unescape("%3e") + "soft_lines;"); 
    if (hard) soft_lines = hard_lines; return soft_lines; 
} 

function cleanForm() 
{ 
    var the_form = document.forms[0]; 
    for (var i = 0, il = the_form.length; i < il; i++) 
    { 
     if (!the_form[i]) continue; 
     if (typeof the_form[i].rows != "number") continue; 
     the_form[i].rows = countLines(the_form[i].value, the_form[i].cols) + 1; 
    }  
    setTimeout("cleanForm();", 3000); 
} 

Answer 3

행을 엄청나게 높게 설정하면 CSS 높이 규칙이 화면에서이를 무시해야합니다.

그런 다음 인쇄 스타일 시트에서 높이를 auto로 설정하십시오. 이로 인해 사용 가능한 모든 행이 채워지지 않았지만 최소한 모든 텍스트가 표시되는 큰 공백이 발생할 수 있습니다.

Answer 4

jQuery의 자동 증가()

http://plugins.jquery.com/project/autogrow