모바일 자동으로 늘어나는 textarea 만들기 > JavaScript

모바일 자동으로 늘어나는 textarea 만들기

페이지 정보

작성자 최고관리자 작성일 21-02-10 17:37 조회 7,095 댓글 0

본문

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>autogrowshrink textarea</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<style>
textarea {
margin: 50px;
width: 200px;
height: 30px;
border-radius: 5px;
}
</style>
</head>
<body>

<textarea id="textarea"></textarea>

<script src="js/jquery-1.6.4.min.js"></script>
<script>
(function() {

var textarea = $('#textarea'),
originHeight = textarea.height(),
originClientHeight = textarea[0].clientHeight,
clone = textarea.clone(),
extraHeight = parseInt(textarea.css('fontSize')),
timer, content, cloneScrollHeight;

clone
.removeAttr('id')
.removeAttr('name')
.css({
position: 'absolute',
top: 0,
left: -9999,
overflow: 'hidden'
}).appendTo('body');

textarea.focus(function() {

timer = setInterval(function() {
content = textarea.val();
clone.val(content);
cloneScrollHeight = clone[0].scrollHeight;

if (originClientHeight < cloneScrollHeight) {
textarea.css('height', cloneScrollHeight + extraHeight);
} else if (originClientHeight === cloneScrollHeight) {
textarea.css('height', originHeight);
}
}, 100);

});

textarea.blur(function() {
clearInterval(timer);
});

})();
</script>

</body>
</html>

댓글목록 0

등록된 댓글이 없습니다.