모바일 자동으로 늘어나는 textarea 만들기
페이지 정보
본문
<!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>
<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>
- 이전글div 또는 table의 tr 펴기 접기 하기...보였다 안보였다 21.02.10
- 다음글마우스 따라다니는 레이어 만들기 21.02.10
댓글목록
등록된 댓글이 없습니다.