입력 내용에 따라 높이를 조정하는 텍스트 상자용 코드_양식 특수 효과

실제로 대부분의 최신 브라우저는 텍스트 상자 크기 조정 기능을 지원하지만 대부분의 경우 빠르게 자동으로 조정되지 않습니다. 적응력이 뛰어난 텍스트 상자를 얻기 위한 비교적 간단한 방법을 인터넷에서 찾았으므로 이 기능을 캡슐화하여 준비했습니다. 향후 프로젝트에 적용합니다.
소스 코드:
23:03 기사 업데이트:
다시 한 번 도움을 주신 alucelx에게 감사드립니다. 덕분에 메서드가 크게 단순화되고 코드가 0.2 버전으로 업데이트되었습니다. 동시에 호환성 문제도 해결되었습니다. Opera 브라우저와 함께 사용할 수 있으며 이제 IE6 및 최신 브라우저와 완벽하게 호환됩니다!
온라인 데모: http://demo.jb51.net/js/2011/autoArea/index.htm
autoTextarea.js

코드 복사 코드는 다음과 같습니다.

/**
* 입력 내용에 따라 텍스트 상자의 높이가 조정됩니다.
* @author tang bin
* @version 0.3
* @see http://www.planeart.cn/?p=1489
* @param {HTMLElement} 입력 상자 요소
* @param {Number} 커서와 입력 상자 사이의 거리를 설정합니다(기본값 20)
* @param {Number} 최대 높이를 설정합니다(선택 사항). )
*/
var autoTextarea = function(elem, extra, maxHeight) {
extra = extra || 20; var isFirefox = !!document.getBoxObjectFor || 창의 'mozInnerScreenX',
isOpera = !!window.opera && !!window.opera.toString() .indexOf( 'Opera'),
addEvent = function(type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on ' 유형, 콜백);
getStyle = elem.currentStyle ? 함수(이름) {
var val = elem.currentStyle[name]
if (이름 === 'height' && val.search(/px/i) !== 1) {
var ect = elem.getBoundingClientRect()
return ret.bottom - ret.top -
parseFloat(getStyle('paddingTop') )) -
parseFloat(getStyle('paddingBottom')) 'px';
};
return val;
} : function(name) {
return getCompulatedStyle(elem, null) [이름] ;
},
minHeight = parsFloat(getStyle('height'));
elem.style.maxHeight = elem.style.resize =
var 변경 = 함수 () {
var scrollTop, height,
padding = 0,
style = elem.style
if (elem._length === elem.value.length)
elem; ._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop'))parseInt(getStyle('paddingBottom'));
scrollTop = document.documentElement.scrollTop;
elem.style.height = minHeight 'px'
if (elem.scrollHeight > minHeight) {
if ( maxHeight && elem .scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto'
} else {
height = elem.scrollHeight - padding; style.overflowY = 'hidden';
style.height = 높이 추가 'px';
scrollTop = parsInt(style.height)
document.body.scrollTop; = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parsInt(style.height);
};
addEvent('propertychange', 변경);
addEvent('input', 변경);
change()
};


테스트 코드:


Content-Type " content="text/html; charset=utf-8" />

#textarea { 글꼴: 1.4em/1.8em Arial; 너비: 550px; 패딩:10px }




<script> <BR>var text = document.getElementById("textarea"), <BR>tip = ' 뭔가 쓰고 싶어요.'; <BR>autoTextarea(text);// 호출 <BR>text.value = 팁; <BR>text.onfocus = function () { <BR>if (text.value === 팁) text.value = ''; <BR>}; <BR>text.onblur = function () { <BR>if (text.value === '') text.value = <BR>}; <BR>< /script> <BR></script>