확장 텍스트 상자는 어떻게 만듭니 까?

주어진 너비/높이로 시작하는 교과서를 만들고 싶습니다. 그런 다음 사용자가 주어진 공간의 양을 더 입력하면 텍스트 상자가 아래로 확장됩니다. 어떻게해야합니까? 나는 CSS를 사용합니까? 기본 텍스트 상자는 사용자가 허용하는 행 수를 전달할 때 스크롤 막대 만 표시합니다. 텍스트 상자에서 행을 5 개 더 확장하도록하려면 어떻게해야합니까?확장 텍스트 상자는 어떻게 만듭니 까?

<form method="post" action=""> 
<textarea name="comments" cols="50" rows="5"></textarea><br> 
<input type="submit" value="Submit" /> 
</form>

어떻게 로버트 하비가 언급 한 예제를 사용합니까? 내가 사용하는 자바 스크립트 전에 ..

출처

2010-05-27 jpjp

jQuery를 자동 크기 플러그인
http://james.padolsey.com/javascript/jquery-plugin-autoresize/

단계를 사용하지 :

당신은 jQuery를해야합니다. 귀하의 페이지에 추가하려면 :

<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

그런 다음 플러그인을 다운로드하여 웹 페이지와 동일한 폴더에 넣으십시오. 를 참조하려면 웹 페이지에이 추가 :

<script type="text/javascript" 
    src="autoresize.jquery.js"></script>

다음, 페이지에 텍스트 상자를 추가

<textarea id="comment" style="width: 400px; padding: 10px; height: 50px; 
    display: block; font-family:Sans-serif; font-size:1.2em;"> 
    Type something in here, when you get close to the end the box will expand! 
</textarea>

마지막으로, 스크립트 블록에 플러그인을 후크 코드를 추가 텍스트 상자 :

<script type="text/javascript"> 
    $('textarea#comment').autoResize({ 
     // On resize: 
     onResize : function() { 
      $(this).css({opacity:0.8}); 
     }, 
     // After resize: 
     animateCallback : function() { 
      $(this).css({opacity:1}); 
     }, 
     // Quite slow animation: 
     animateDuration : 300, 
     // More extra space: 
     extraSpace : 40 
    }); 
</script>

출처

2010-05-27 20:31:57

합니다. 그냥 내가 필요한 것 !! – jpjp

죄송 합니다만 전에 jquery를 사용한 적이 없습니다. 이걸 어떻게 작동시켜야할까요? 코드를 다운로드하여 . 그러나 텍스트 상자는 여전히 동일합니다 – jpjp

다음은 좋은 교육용 비디오입니다. http://www.youtube.com/watch?v=Hk5oXFtYLwE 또는 jQuery 설명서를 읽을 수 있습니다. http://docs.jquery.com/Tutorials : Getting_Started_with_jQuery – mVChr

텍스트 영역의 scrollTop 속성을 관리하거나 추적하는 경우 라이브러리를 추가 할 수 있습니다.

scrollTop이 0이 아닌 경우 행을 추가하십시오. 여기

<!doctype html> 
<html lang= "en"> 
<head> 
<meta charset= "utf-8"> 
<title>Expand textarea </title> 
<style> 
textarea{overflow-y:scroll} 
</style> 
<script> 
onload=function(){ 
    var who=document.getElementsByName('comments')[0]; 
    who.onkeyup=function(){ 
     if(who.scrollTop)who.rows=parseInt(who.rows)+5; 
    } 
} 
</script> 
</head> 
<body> 
<textarea name="comments" cols="50" rows="5"></textarea> 
</body> 
</html>

출처

2010-05-27 21:50:59 kennebec

간단하고 라이브러리가 없지만 여전히 많은 작업이 필요합니다. [피들] (http://jsfiddle.net/h7jmmwcv/). 마우스로 붙여 넣기 (키 입력하지 않음), 위쪽에서 텍스트 입력 (스크롤 탑 변경 없음), 텍스트 삭제 (높이 축소 안 함), 쓸데없는 쓸모없는 스크롤바 표시는 나를 사용하지 못하게하는 것들 중 일부입니다 – Hashbrown

는 my solution는 자바 스크립트 바닐라 사용하고 있습니다.
Chrome, Firefox & IE8 이상에서 작동하는 것으로 테스트되었습니다.

부하에

, 또는 기능에 구타 :

var element = document.getElementById('comments'); 
var retractsAutomatically = false; 

var sizeOfOne = element.clientHeight; 
element.rows = 2; 
var sizeOfExtra = element.clientHeight - sizeOfOne; 
element.rows = 1; 

var resize = function() { 
    var length = element.scrollHeight; 

    if (retractsAutomatically) { 
     if (element.clientHeight == length) 
      return; 
    } 
    else { 
     element.rows = 1; 
     length = element.scrollHeight; 
    } 

    element.rows = 1 + (length - sizeOfOne)/sizeOfExtra; 
}; 

//modern 
if (element.addEventListener) 
    element.addEventListener('input', resize, false); 
//IE8 
else { 
    element.attachEvent('onpropertychange', resize) 
    retractsAutomaticaly = true; 
}

CSS를 & HTML : 그 굉장 오

textarea#comments { overflow:hidden; }

<textarea id="comments" cols="50" rows="1"></textarea>

출처

2014-12-30 01:20:30 Hashbrown

확장 텍스트 상자는 어떻게 만듭니 까?

답변

관련 문제