TAG
CSS
JavaScript
Result
Run
License
<fieldset id="fields" class="fields"> <legend>This fields is enabled.</legend> <input type="text" /><br /> <input type="text" /> </fieldset> <button type="button" id="btn-pointerlock-toggle" value="lock">Lock</button>
.fields { position: relative; } .fields.tooltip::before { content: attr(data-duration) " 초 후에 잠금이 해제됩니다."; position: absolute; z-index: 1; background-color: white; display: inline-block; padding: 2px 10px; border: 1px solid #CCC; border-radius: 10px; } .fields.lock::after { content: ""; position: absolute; inset: 0; background-color: hwb(0 0% 100% / 0.3); }
window.addEventListener("load", () => { const elFields = document.getElementById("fields"); const elBtnPointerLockToggle = document.getElementById("btn-pointerlock-toggle"); const duration = 2; elFields.setAttribute("data-duration", duration); elBtnPointerLockToggle.addEventListener("click", e => { const elTarget = e.currentTarget; if(elTarget.value == "lock") { elFields.requestPointerLock(); setTimeout(() => document.exitPointerLock(), 1000 * duration); } }); document.addEventListener("pointerlockchange", () => { const elPointerLocked = document.pointerLockElement; if(elPointerLocked) { elFields.children[0].textContent = "This fields is disabled."; elBtnPointerLockToggle.textContent = "Unlock"; elBtnPointerLockToggle.value = "unlock"; elFields.classList.add("lock", "tooltip"); } else { elFields.children[0].textContent = "This fields is enabled."; elBtnPointerLockToggle.textContent = "Lock"; elBtnPointerLockToggle.value = "lock"; elFields.classList.remove("lock", "tooltip"); } }); });
Console
expand_less
License
License
by DevDic
Close