Fix issue where IME is triggered in Information Panel

hbl917070 · Dec 29, 2024 · 266e342 · 266e342
1 parent bd27737
commit 266e342
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/Www/ejs/MainWindow/MainWindow.ejs b/Www/ejs/MainWindow/MainWindow.ejs
@@ -201,11 +201,8 @@
                                 </div>
                             </div>
 
-                            <!-- 用 contenteditable 把元素設進入編輯狀態，這樣就能避免選取文字時，因滑鼠超出邊界而觸發全選 -->
-                            <div class="mainExifList base-scrollbar js-tabContent-info" contenteditable="true" onbeforeinput="return false">
-                            </div>
-                            <div class="mainExifRelated base-scrollbar js-tabContent-related" contenteditable="true" onbeforeinput="return false">
-                            </div>
+                            <div class="mainExifList base-scrollbar js-tabContent-info"> </div>
+                            <div class="mainExifRelated base-scrollbar js-tabContent-related"> </div>
                         </div>
                     </div>
 

diff --git a/Www/ts/Lib.ts b/Www/ts/Lib.ts
@@ -643,6 +643,33 @@ export class Lib {
         return jsonFormat;
     }
 
+    /**
+     * 讓元素進入編輯狀態，避免選取文字時，因滑鼠超出邊界而觸發全選
+     */
+    public static controlTextSelection(div: HTMLElement) {
+
+        // 在滑鼠按下的狀態使用輸入法，依然會導致文字被修改，但一般人不會這樣操作，所以不處理
+
+        // 阻止編輯
+        div.addEventListener("beforeinput", async (e) => {
+            e.preventDefault();
+        });
+
+        // 如果一直處於編輯狀態，會導致跳出輸入法
+        // 所以開始選取文字才啟用編輯
+        div.addEventListener("mousedown", () => {
+            if (div.getAttribute("contenteditable") !== "true") {
+                div.setAttribute("contenteditable", "true");
+            }
+        });
+        // 滑鼠放開後，取消編輯
+        document.addEventListener("mouseup", () => {
+            if (div.getAttribute("contenteditable") !== "false") {
+                div.setAttribute("contenteditable", "false");
+            }
+        });
+    }
+
     /** file 轉 base64 */
     public static async readFileAsDataURL(file: File): Promise<string> {
         return await new Promise((resolve, reject) => {

diff --git a/Www/ts/MainWindow/MainExif.ts b/Www/ts/MainWindow/MainExif.ts
@@ -39,6 +39,10 @@ export class MainExif {
 		const _domTabContentInfo = _domMainExif.querySelector(".js-tabContent-info") as HTMLElement;
 		const _domTabContentRelated = _domMainExif.querySelector(".js-tabContent-related") as HTMLElement;
 
+		// 避免滑鼠超出邊界而觸發全選
+		Lib.controlTextSelection(_domTabContentInfo);
+		Lib.controlTextSelection(_domTabContentRelated);
+
 		const _relatedFileExtList = ["txt", "json", "xml", "info", "ini", "config"];
 		var _fileInfo2: FileInfo2;