텍스트로 채워질 때 텍스트 영역 높이를 늘려야합니다. 이전에이를위한 JavaScript / JQuery 솔루션이있었습니다.
function expandingTextBox(e) {
$(e).css({'height':'80', 'overflow-y':'hidden'}).height(e.scrollHeight);
}
$('textarea').each(function(){
expandingTextBox(80);
}).on('input', function() {
expandingTextBox(this);
});
그리고 이것은 거의 목적을 달성했습니다. 간단히 말해서, 웹 애플리케이션에 팝업이 있고 다른 곳에서 개체를 드래그하여 팝업에 덤프하여 콘텐츠에 맞게 크기를 조정하는 새 텍스트 영역을 만들 수 있기를 원합니다. 이 기능은 내가 입력 할 때 텍스트 영역의 크기 만 조정합니다.
동료는 JavaScript 나 JQuery 플러그인없이 CSS만으로이 작업을 수행 할 수 있다고 생각합니까? 인터 웹에서 찾은 다른 모든 솔루션은 적어도 일부 JQuery 플러그인에 의존합니다 (그리고 직장에서 새 플러그인을 쉽게 다운로드 할 수 없습니다). CSS만으로 방법이 있습니까?
textareas를 div로 변경하고 contenteditable 속성을 사용해 보았습니다. 이로 인해 다른 곳에서 문제가 발생했습니다 (그러나 이유를 설명하는 데 오랜 시간이 걸립니다).
Thx-Gaweyne
편집 : 순수한 CSS로 불가능하다면 추가 플러그인을 다운로드 할 필요가없는 JavaScript 또는 JQuery를 사용하는 솔루션을 수락합니다.
이벤트 위임 을 사용 하여 동적으로 추가 된 요소를 처리합니다.
CSS를 스타일 시트로 이동합니다.
입력시 높이를 80으로 설정 한 다음 스크롤 높이로 설정합니다.
단편
$('button').on('click', function() {
$('<textarea/>').appendTo('body').focus();
});
$(document).on('input', 'textarea', function() {
$(this).height(80).height(this.scrollHeight);
});textarea {
vertical-align: top;
height: 80px;
overflow-y: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add new textarea</button>
<hr>
<textarea></textarea>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다