diff --git a/src/app.js b/src/app.js index 11472c9..a7f7fb2 100644 --- a/src/app.js +++ b/src/app.js @@ -532,13 +532,20 @@ setInterval(() => { // ---------- 阅读模式 ---------- + function exitReadingMode() { + document.body.classList.remove("reading", "top-shown"); + clearTimeout(readingHideTimer); + editor.contentEditable = "true"; + editor.style.removeProperty("-webkit-user-modify"); + editor.focus(); + } function toggleReading() { const isReading = document.body.classList.toggle("reading"); if (isReading) { editor.contentEditable = "false"; + editor.style.setProperty("-webkit-user-modify", "read-only", "important"); } else { - editor.contentEditable = "true"; - editor.focus(); + exitReadingMode(); } } @@ -908,9 +915,7 @@ setInterval(() => { } // Esc 退出阅读模式 if (e.key === "Escape" && document.body.classList.contains("reading")) { - document.body.classList.remove("reading"); - editor.contentEditable = "true"; - editor.focus(); + exitReadingMode(); } }); @@ -924,11 +929,7 @@ setInterval(() => { const exitBtn = document.createElement("div"); exitBtn.className = "reading-exit"; exitBtn.textContent = "退出阅读 (Esc)"; - exitBtn.addEventListener("click", () => { - document.body.classList.remove("reading"); - editor.contentEditable = "true"; - editor.focus(); - }); + exitBtn.addEventListener("click", exitReadingMode); document.body.appendChild(exitBtn); // 阅读模式下:鼠标/手指移到顶部才显示退出按钮 diff --git a/src/styles.css b/src/styles.css index 7ed7f14..630e58b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -333,6 +333,7 @@ body.reading .editor { cursor: default; -webkit-user-select: text; user-select: text; + -webkit-user-modify: read-only; } body.reading .topbar, body.reading .sidebar { transition: all 0.3s; } @@ -356,7 +357,7 @@ body.reading .sidebar { transition: all 0.3s; } /* 阅读模式下默认隐藏,鼠标/手指移到顶部才浮现 */ body.reading .reading-exit { opacity: 0; pointer-events: none; } body.reading.top-shown .reading-exit { opacity: 0.75; pointer-events: auto; } -.reading-exit:hover { opacity: 1 !important; } +body.reading .reading-exit:hover { opacity: 1 !important; } /* ---------- 移动端 ---------- */ @media (max-width: 720px) {