키패드 테스트2

hnjung · Aug 6, 2024 · f843d34 · f843d34
1 parent 23313bd
commit f843d34
Showing 1 changed file with 65 additions and 3 deletions.
diff --git a/MAWPUB/view/html/com/com/com/test.html b/MAWPUB/view/html/com/com/com/test.html
@@ -12,6 +12,13 @@
 	<link rel="stylesheet" href="../../../../css/com/page.css">
 	<style>
 		input[type="text"], textarea { scroll-margin-top: 100px; }
+		#make-scrollable {
+			position: absolute;
+			left: 0;
+			width: 1px;
+			height: 0;
+			transition: height 0.5s linear;
+		}
 	</style>
 </head>
 <body>
@@ -151,7 +158,7 @@ <h2 class="main-copy">
 
 				<!-- .btn -->
 				<div class="btn-group option-main">
-					<button type="button" class="btn primary"><span>와ㅋ77다음</span></button>
+					<button type="button" class="btn primary"><span>와ㅋ8다음</span></button>
 				</div>
 				<!--// .btn -->
 
@@ -181,6 +188,8 @@ <h2 class="main-copy">
 	</div>
 	<!--// #loading -->
 
+	<!-- <div id="make-scrollable"></div> -->
+
 </div>
 <!--// #wrap -->
 <script src="../../../../js/com/jquery-3.7.0.min.js"></script>
@@ -212,11 +221,11 @@ <h2 class="main-copy">
 			document.querySelector('#text1 > em').innerHTML = nowScrollTop;
 			document.querySelector('#text2 > em').innerHTML = (nowScrollTop + element.getBoundingClientRect().top) - (document.querySelector('#header').scrollHeight * 2);
 			document.querySelector('#text3 > em').innerHTML = `window.innerHeight=${window.innerHeight}, document=${document.documentElement.clientHeight}, visualviewport=${window.visualViewport.height}`;
-		}, 100);
+		}, 1000);
 
 	}
 }
-commUiFocusInputText.init();
+/* commUiFocusInputText.init(); */
 
 
 if ('visualViewport' in window) {
@@ -233,6 +242,59 @@ <h2 class="main-copy">
 	});
 }
 
+
+let isFocus = false;
+
+// 항목일 있을경우 코드 작동
+if (document.querySelectorAll('input[type="text"], textarea').length > 0) {
+    appendScrollElement();
+
+    // onResize visualViewport
+    visualViewport.addEventListener("resize", handleVisualViewportResize);
+}
+
+function handleVisualViewportResize(event) {
+    triggerKeyboardOpen(event.currentTarget.height);
+}
+
+// make-scrollale 객체 추가
+function appendScrollElement() {
+    const scrollElement = document.createElement('div');
+    scrollElement.setAttribute("id", "make-scrollale");
+    document.querySelector('#wrap').appendChild(scrollElement);
+}
+
+function onFocus() {
+    document.querySelector("#make-scrollale").style.height = "calc(100% + 1px)";
+    document.querySelector('#wrap').style.overflow = "hidden";
+}
+
+function onFocusOut() {
+    document.querySelector("#make-scrollale").style.height = "0";
+    document.querySelector('#wrap').style.overflow = "";
+}
+
+function triggerKeyboardOpen() {
+    if (isFocus) {
+        onFocus();
+        // 키보드를 열어준 객체로 스크롤합니다.
+        scrollToActiveElement();
+    }
+    else {
+        onFocusOut();
+    }
+}
+
+function scrollToActiveElement() {
+    // document.activeElement parent id contain wrap
+    if (document.activeElement.parentElement.id.includes('wrap')) {
+        document.activeElement.parentElement.scrollIntoView(true);
+    }
+    else {
+        document.activeElement.scrollIntoView(true);
+    }
+}
+
 </script>
 </body>
 </html>