여러 텍스트 상자의 자동 texbox 높이

배경 : 많은 게시물이있는 facebook walllike 페이지를 만들고 있습니다. 모든 게시물에 댓글을 달 수 있어야합니다. 그리고 당신의 코멘트를 입력하는 글 상자는 페이스 북처럼 크기를 조정해야합니다.여러 텍스트 상자의 자동 texbox 높이

나는 지금까지이 코드를 가지고 있습니다. 그것은 작동하지만 페이지의 첫 번째 텍스트 상자에서만 작동합니다. 모든 작업을 원합니다 :)

모든 텍스트 상자에서 작동 할 수있는 기회가 있습니까?

<script type="text/javascript"> 
var observe; 
if (window.attachEvent) { 
observe = function (element, event, handler) { 
    element.attachEvent('on'+event, handler); 
}; 
} 
else { 
observe = function (element, event, handler) { 
    element.addEventListener(event, handler, false); 
}; 
} 
function init() { 
var text = document.getElementById('text'); 
function resize() { 
    text.style.height = 'auto'; 
    text.style.height = text.scrollHeight+'px'; 
} 
/* 0-timeout to get the already changed text */ 
function delayedResize() { 
    window.setTimeout(resize, 0); 
} 
observe(text, 'change', resize); 
observe(text, 'cut',  delayedResize); 
observe(text, 'paste', delayedResize); 
observe(text, 'drop', delayedResize); 
observe(text, 'keydown', delayedResize); 

text.focus(); 
text.select(); 
resize(); 
} 
</script> 
</head> 
<body onload="init();"> 
<textarea rows="1" style="height:1em;" id="text"></textarea> 
</body> 
</html>

출처

2012-11-15 Jussi Hietanen

라이브 페이지의 샘플 코드를 제공 할 수 있습니까? 그대로, 여기에 표시된 javascript는 텍스트 ID로 식별되는 단일 요소에서만 작동합니다. 따라서 얼마나 많은 텍스트 영역이 있더라도 영향을받는 유일한 요소는 해당 ID를 가진 페이지의 요소 중 하나 일 것입니다. 물론 그 중 하나만 있어야합니다.

지금 코드로 접근하면 document.getElementById에서 document.getElementsByTagName('textarea')으로 변경하고 결과를 반복해야합니다. 다음보십시오 :

function init() { 
var textareas = document.getElementsByTagName('textarea'); 
... 
var textareasLength = textareas.length; 
for (var i = 0; i < textareasLength; i++) { 
    observe(textareas[i], 'change', resize); 
    observe(textareas[i], 'cut',  delayedResize); 
    observe(textareas[i], 'paste', delayedResize); 
    observe(textareas[i], 'drop', delayedResize); 
    observe(textareas[i], 'keydown', delayedResize); 
}  
}

편집 : 직전 라인에 정의 된대로 검토에

은, 무엇보다도, 당신의 크기 조정() 함수는 text 변수 작업을했다. 완전히 코드를 리팩토링하지 않고, 당신이 원하는 기능을 얻을 수있는 한 가지 방법은 다음과 같다 :

function init() { 
var textareas = document.getElementsByTagName('textarea'); 
function resize() { 
    if(arguments.length>0) { 
     self=arguments[0]; 
    } else self=this;  
    self.style.height = 'auto'; 
    self.style.height = self.scrollHeight+'px'; 
} 
/* 0-timeout to get the already changed text */ 
function delayedResize() { 
    var self=this; 
    window.setTimeout(resize(self), 0); 
} 
var textareasLength = textareas.length; 
for (var i = 0; i < textareasLength; i++) { 
observe(textareas[i], 'change', resize); 
observe(textareas[i], 'cut',  delayedResize); 
observe(textareas[i], 'paste', delayedResize); 
observe(textareas[i], 'drop', delayedResize); 
observe(textareas[i], 'keydown', delayedResize); 
}  
}

이 최적 아니지만, 그것은 작동합니다.

출처

2012-11-15 17:41:45 somewhatsapient

http://pastebin.com/QHsSn7MH 양식은 하나만 있지만 루프가 진행 중입니다. 모든 양식에는 동일한 ID가 있습니다. 숨겨진 ID (상위 게시물 ID) 만 다릅니다. –

ID가 고유해야합니다 ... –

흠, 아직 첫 번째는 작동하지 않습니다 :/ –

document.getElementById('text')으로 하나만 선택했기 때문에 하나의 텍스트 상자에서만 작동합니다. id 속성은 고유해야한다는 것을 기억하십시오.

은 당신이 뭔가를 할 수 있습니다 :

texts = document.querySelectorAll('.text'); 
texts.forEach(function (text) { 
    ... your current code for text ... 
});

을는 .text 당신이 class="text" 모든 요소를 선택하고 의미 곳.

출처

2012-11-15 17:43:03

전체 코드를 써주시겠습니까? 나는 자바 스크립트에서 총 멍청 아. –

여러 텍스트 상자의 자동 texbox 높이

답변

관련 문제