From f843d34ac139c2397ea0c08818acd704faa8932a Mon Sep 17 00:00:00 2001 From: Hana Jung Date: Tue, 6 Aug 2024 16:31:48 +0900 Subject: [PATCH] =?UTF-8?q?=ED=82=A4=ED=8C=A8=EB=93=9C=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- MAWPUB/view/html/com/com/com/test.html | 68 ++++++++++++++++++++++++-- 1 file changed, 65 insertions(+), 3 deletions(-) diff --git a/MAWPUB/view/html/com/com/com/test.html b/MAWPUB/view/html/com/com/com/test.html index c3db89c..b06c976 100644 --- a/MAWPUB/view/html/com/com/com/test.html +++ b/MAWPUB/view/html/com/com/com/test.html @@ -12,6 +12,13 @@ @@ -151,7 +158,7 @@

- +
@@ -181,6 +188,8 @@

+ + @@ -212,11 +221,11 @@

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 @@

}); } + +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); + } +} + \ No newline at end of file