1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!-- 현재 작성하고 있는 파일은 UTF-8 DOS파일입니다.-->
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
  4.   <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.   </head>
  7.   <body>
  8.     &lt;form&gt; - &lt;textarea&gt; 사용법<br />
  9.     <b>&lt;textarea&gt; 여러 줄의 텍스트 입력 제어를 정의합니다.</b><br /><br />
  10.     ( 속성- cols, rows, disabled, name ) <br />
  11.     ( HTML5추가 속성-autofocus, placeholder, wrap  <br />
  12.     <span style="padding-left:140px;"></span>-> 브라우저가 덜 지원하는 속성 <br />
  13.     <span style="padding-left:140px;"></span>form, maxlength, required ) <br />
  14.     <br />
  15.     &lt;textarea&gt; 텍스트 영역의 문자를 무제한으로 보유 할 수 있으며,  <br />
  16.     텍스트는 고정 폭 글꼴에서 렌더링합니다.(usually Courier) <br />
  17.     텍스트 영역의 크기는 CSS 통해 높이와 넓이 속성을 통해 더 나은 <br />
  18.     cols 그리고 rows 속성을 지정할수 있습니다.<br />
  19.     &lt;textarea&gt; 태그는 직접 해보셔야 이해가 빠릅니다. <br />
  20.     <br />
  21.     <hr />
  22.     <div id="ex_view2">
  23.    
  24.     <script type="text/javascript" language="javascript">
  25.     <!--
  26.     /* 파일 불러올때 텍스트아레아 높이 가져오기 
  27.       아래 window처럼 해야 하는데 예제는 숨겨져 있으니 안됨 
  28.       버튼에 클릭 이벤트에 추가했다는거만 틀립니다.*/
  29.     window.onload = function(){
  30.    save_textarea_height = document.getElementById('atte_rows').scrollHeight;
  31.     }
  32.     /* 텍스트상자 클릭시 빈칸으로 초기화 */
  33.     function resize(tarea_obj) {
  34.     if(tarea_obj.scrollHeight > tarea_obj.clientHeight){
  35.             tarea_obj.style.height = (1+tarea_obj.scrollHeight)+"px";
  36.     }
  37.     else if((event.keyCode==8 || event.keyCode==46) && tarea_obj.scrollHeight > save_textarea_height){
  38.     /* 백스페이드 키와 delete키 삭제시 아레아 창 줄어들기 */
  39.     tarea_obj.style.height = "1px";
  40. tarea_obj.style.height = (1+tarea_obj.scrollHeight)+"px";
  41. /* 만약 삭제할때 높이가 save_textarea_height 보다 작다면
  42.   기본 설정 높이로 초기화 */
  43. if(tarea_obj.scrollHeight < save_textarea_height){
  44.  tarea_obj.style.height = save_textarea_height+"px";
  45. }
  46.     }
  47.     /* else는 쓰기 애매함 */
  48.    
  49.     /* 참조(http://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length)
  50. function resize(obj) {
  51.  obj.style.height = "1px";
  52.  obj.style.height = (20+obj.scrollHeight)+"px";
  53. }
  54. el . style . height =  
  55. ( el . scrollHeight > el . clientHeight )  ?  ( el . scrollHeight )+ "px"  :  "60px" ;
  56.           */
  57. }
  58.         //-->
  59.       </script>
  60.       <style type="text/css">
  61.       <!--
  62.        .textarea_atte_value{ border-collapse:collapse; }
  63.        .textarea_atte_value th{ text-align:left; }
  64.        .textarea_atte_value td{ padding-left:10px; }
  65.        .textarea_atte_value textarea{height:auto; !important;}
  66.       -->
  67.       </style>
  68.       <form name="textarea_type" id="textarea_type" method="post" >
  69.       <!-- 예제 박스에선 안됨 => form태그안에 form태그있으면 지워짐~ㅠ.ㅠ -->
  70.    <p><b>예제 - &lt;textarea&gt;속성 cols값 리스트</b></p>
  71.    <table border=1 class="textarea_atte_value">
  72.    <tr>
  73.    <th>&lt;textarea cols="60"=></th><td>
  74.    <textarea cols="60" name="atte_cols" id="atte_cols"></textarea></td>
  75.        </tr>
  76.       </table>
  77.    <p><b>예제 - &lt;textarea&gt;속성 rows값 리스트</b></p>
  78.    <p>자바스크립트로 rows 이상의 줄일때 화면 높이 조절</p>
  79.    <table border=1 class="textarea_atte_value">
  80.    <tr>
  81.    <th>&lt;textarea  rows="4"=></th><td>
  82.    <textarea rows="4" cols="60" name="atte_rows" id="atte_rows" onkeyup="resize(this)"></textarea></td>
  83.        </tr>
  84.       </table>
  85.    <p><b>예제 - &lt;textarea&gt;속성 disabled값 리스트</b></p>
  86.    <table border=1 class="textarea_atte_value">
  87.    <tr>
  88.    <th>&lt;textarea disabled=></th><td>
  89.    <textarea disabled rows="4" cols="60" name="atte_disabled" id="atte_disabled" >입력금지</textarea></td>
  90.        </tr>
  91.       </table>
  92.       <p><b>예제 - &lt;name&gt;속성(이름지정)이건 생략...무진장 썼기 때문<br /></b></p>
  93.       </form>
  94.     </div>
  95.   </body>
  96. </html>

--------------------------------------------------------------------------------------------

위 소스 예제 보기


<textarea></textarea>


<textarea> 여러 줄의 텍스트 입력 제어를 정의합니다.

속성-cols, rows, disabled, name

HTML5추가 속성-autofocus, placeholder, wrap

                        브라우저가 덜 지원하는 속성(HTML5추가 속성)

                        form, maxlength, required


위 소스에서는 HTML5추가 속성은 생략했습니다.

그외 XHTML 소스의 예제는 위에서 보기로 보시고

아래 버튼 클릭하시면 설명이 나옵니다.

태그 속성 보기(접어두었습니다.)


Global Attributes 지원합니다.


:
BLOG main image

공지사항

카테고리

분류 (356)
main (1)
php5 (218)
HTML (36)
javascript (93)
IT 이론과 퍼온정보 (8)
깨작일상 (0)
곧 추가할 내용 (0)
추후 알아볼것들... (0)

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

달력

«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Total :
Today : Yesterday :