실제로 대부분의 최신 브라우저는 텍스트 상자 크기 조정 기능을 지원하지만 대부분의 경우 빠르게 자동으로 조정되지 않습니다. 적응력이 뛰어난 텍스트 상자를 얻기 위한 비교적 간단한 방법을 인터넷에서 찾았으므로 이 기능을 캡슐화하여 준비했습니다. 향후 프로젝트에 적용합니다. 소스 코드: 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() }; 테스트 코드: < !DOCTYPE html> Content-Type " content="text/html; charset=utf-8" />
텍스트 상자는 입력 내용에 따라 높이를 조정합니다