Add files via upload

Author: 3code-type

3code_mobile.html

@@ -82,7 +82,7 @@
             align-items: center;
         }
 
-        /* 輸入結果顯示區 */
+        /* 輸入結果顯示區 (現在是可編輯區域) */
         #text-output {
             width: 100%;
             background-color: var(--container-bg);
@@ -97,7 +97,8 @@
             white-space: pre-wrap;
             word-break: break-word;
             color: var(--text-color);
-            cursor: text;
+            /* 設置 cursor 為 text，並確保它能顯示游標 */
+            cursor: text; 
         }
 
         /* 候選字與輸入區 */
@@ -116,7 +117,7 @@
             padding: 8px;
             font-size: 1.2rem;
             min-height: 40px;
-            line-height: 1.5;
+            line-height: 1.5; 
             border: none;
             border-bottom: 1px solid var(--border-color);
             background-color: #fafafa;
@@ -240,7 +241,7 @@
     </div>
 
     <div id="app-container">
-        <div id="text-output"></div>
+        <div id="text-output" contenteditable="true" spellcheck="false"></div>
 
         <div id="input-area">
             <div id="main-input">編碼顯示在此</div>
@@ -262,51 +263,46 @@
 
         // 字母鍵的基礎映射
         const letter_maps = {
-            'cn_normal': (key) => key.toUpperCase(), // 中文模式顯示大寫字母 (A-Z)
-            // 中文模式下，字母鍵的顯示不隨 Shift 改變，維持大寫
+            'cn_normal': (key) => key.toUpperCase(), 
             'cn_shifted': (key) => key.toUpperCase(), 
-            'en_normal': (key) => key.toLowerCase(), // 英文模式顯示小寫字母 (a-z)
-            'en_shifted': (key) => key.toUpperCase() // 英文 Shift 模式顯示大寫字母 (A-Z)
+            'en_normal': (key) => key.toLowerCase(), 
+            'en_shifted': (key) => key.toUpperCase() 
         };
 
         const key_display_maps = {
             // [0, 0] Chinese Normal (Default)
             'cn_normal': { 
-                // Numbers/Symbols: 中文輸入法的預設符號 (數字輸出，符號編碼)
                 '1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', '8': '8', '9': '9', '0': '0',
                 ';': '；', "'": '〃', ',': '，', '.': '．', '/': '／', 
-                'lang_toggle': '三碼',       // 顯示 '三碼' (當前模式)
+                'lang_toggle': '三碼',
                 'case_shift': '⇧', 
-                'backspace': '⌫',            // 顯示 '⌫'
-                'enter': '↵',                // 顯示 '↵'
-                ' ': ' '                     // 修正: 顯示 ' ' (單一空白字元)
+                'backspace': '⌫',
+                'enter': '↵',
+                ' ': ' ' // 空白鍵顯示 ' '
             },
             // [0, 1] Chinese Shifted (與 cn_normal 相同，除了 case_shift 鍵本身)
             'cn_shifted': { 
                 '1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', '8': '8', '9': '9', '0': '0',
                 ';': '；', "'": '〃', ',': '，', '.': '．', '/': '／', 
                 'lang_toggle': '三碼',
-                'case_shift': '⬆', // 只有 Shift 鍵的視覺改變
+                'case_shift': '⬆', 
                 'backspace': '⌫',
                 'enter': '↵',
                 ' ': ' '
             },
             // [1, 0] English Normal (Lowercase)
             'en_normal': {
                 '1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', '8': '8', '9': '9', '0': '0',
-                // 英文模式預設符號
                 ';': ';', "'": "'", ',': ',', '.': '.', '/': '/',
-                'lang_toggle': 'En',         // 顯示 'En' (當前模式)
+                'lang_toggle': 'En',
                 'case_shift': '⇧',
                 'backspace': '⌫',
                 'enter': '↵',
                 ' ': ' '
             },
             // [1, 1] English Shifted (Uppercase + Secondary Symbols)
             'en_shifted': {
-                // Shifted Symbols (直接輸出)
                 '1': '!', '2': '@', '3': '#', '4': '$', '5': '%', '6': '^', '7': '&', '8': '*', '9': '(', '0': ')',
-                // 英文上檔符號
                 ';': ':', "'": '"', ',': '<', '.': '>', '/': '?',
                 'lang_toggle': 'En',
                 'case_shift': '⬆',
@@ -330,23 +326,46 @@
                                            (isShiftActive ? 'cn_shifted' : 'cn_normal');
             const map = key_display_maps[mapKey];
 
-            // 1. 檢查是否為英文模式下的直接輸出 (字母, 數字, 符號)
+            // 1. 檢查是否為英文模式下的直接輸出 
             if (isEnglishMode) {
                 if (code.match(/^[a-z]$/)) {
-                    // 英文模式下，字母直接輸出大小寫
                     return letter_maps[mapKey](code); 
                 }
-                if (code.match(/^[0-9;'./,<> ]$/)) { // 包含 space
-                    // 英文模式下，數字和符號直接輸出半形/上檔符號
-                    return map[code] || code; // map[code] 對於數字和符號會輸出正確的上檔符號或數字，對於 ' ' 則輸出 ' '
+                if (code.match(/^[0-9;'./,<> ]$/)) { 
+                    return map[code] || code;
                 }
                 return null;
             }
-            
-            // 2. 檢查是否為中文模式下的直接輸出 (無，中文模式下的數字輸出在 handleChineseInput 中處理)
             return null; 
         }
 
+        // --- 核心工具函數：管理游標與輸入 ---
+
+        // 確保游標在 contenteditable 元素的末尾
+        function focusAndMoveCaretToEnd() {
+            textOutput.focus();
+            const range = document.createRange();
+            const selection = window.getSelection();
+            
+            // 將範圍設定為 contenteditable 元素的所有內容
+            range.selectNodeContents(textOutput);
+            // 將游標收縮到範圍的末尾 (即文字末尾)
+            range.collapse(false); 
+            
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+
+        // 在游標位置插入文字 (適用於 contenteditable)
+        function insertTextAtCaret(text) {
+            textOutput.focus(); 
+            // 這是模擬鍵盤輸入最可靠的方式，它會在游標位置插入文字
+            document.execCommand('insertText', false, text); 
+            // 由於 execCommand 可能不會移動到絕對末尾，確保游標被重新定位
+            focusAndMoveCaretToEnd(); 
+        }
+
+
         // --- 舊有代碼區塊 ---
 
         // DOM 元素
@@ -387,7 +406,6 @@
         }
 
         async function loadSecondaryCodemap() {
-            // 注意：這裡假設您的編碼檔名為 3codes2.txt 並且在同目錄
             const fileName = './3codes2.txt'; 
             try {
                 const response = await fetch(fileName);
@@ -404,6 +422,7 @@
                 mainInput.textContent = `錯誤：無法載入編碼檔 ${fileName}。請確認檔案存在。`;
             }
             resetInputState();
+            focusAndMoveCaretToEnd(); // 載入後立即定位游標
         }
 
         // --- 處理中文模式輸入的核心函數 ---
@@ -413,10 +432,9 @@
             // 1. 數字鍵處理 (直接輸出半形數字)
             if (inputChar.match(/^[0-9]$/)) {
                 if (currentCandidates.length > 0) {
-                    selectCandidate(0); // 如果有編碼，先上字
+                    selectCandidate(0); 
                 }
-                // 中文模式的數字直接輸出數字
-                textOutput.textContent += inputChar; 
+                insertTextAtCaret(inputChar); // 插入數字
                 return;
             }
 
@@ -425,16 +443,18 @@
                 if (currentCode.length > 0) {
                     currentCode = currentCode.slice(0, -1);
                     updateStateAndDisplay();
-                } else if (textOutput.textContent.length > 0) {
-                    textOutput.textContent = textOutput.textContent.slice(0, -1);
+                } else {
+                     // 游標位置刪除
+                    textOutput.focus();
+                    document.execCommand('delete', false, null); 
                 }
                 return;
             }
             if (code === 'enter') {
                 if (currentCandidates.length > 0) {
                     selectCandidate(0); 
                 } else {
-                    textOutput.textContent += '\n'; 
+                    insertTextAtCaret('\n'); 
                 }
                 return;
             }
@@ -443,7 +463,7 @@
                 if (currentCandidates.length > 0) {
                     selectCandidate(0); 
                 } else {
-                    textOutput.textContent += '　'; // 輸出全形空白
+                    insertTextAtCaret('　'); // 輸出全形空白
                 }
                 return;
             }
@@ -466,35 +486,36 @@
         function handleEnglishInput(code) {
              // 1. 處理功能鍵
             if (code === 'backspace') {
-                if (textOutput.textContent.length > 0) {
-                    textOutput.textContent = textOutput.textContent.slice(0, -1);
-                }
+                textOutput.focus();
+                document.execCommand('delete', false, null); // 游標位置刪除
                 return;
             }
             if (code === 'enter') {
-                textOutput.textContent += '\n';
+                insertTextAtCaret('\n');
                 return;
             }
             if (code === ' ') {
-                textOutput.textContent += ' '; // 輸出半形空白
+                insertTextAtCaret(' '); // 輸出半形空白
                 return;
             }
 
             // 2. 處理英文字母、數字和符號 
             const outputChar = getOutputChar(code);
             if (outputChar) {
-                textOutput.textContent += outputChar;
+                insertTextAtCaret(outputChar);
             }
         }
 
         // --- 核心狀態更新與顯示函數 (中文模式專用) ---
         function updateStateAndDisplay() {
+            // 修正: 僅顯示編碼，不加自定義游標
             mainInput.textContent = formatCode(currentCode); 
+            
             currentCandidates = currentCodemap[currentCode] || [];
 
             if (currentCode.length === MAX_CODE_LENGTH) {
                 if (currentCandidates.length === 1) {
-                    textOutput.textContent += currentCandidates[0];
+                    insertTextAtCaret(currentCandidates[0]); // 使用 insertTextAtCaret
                     resetInputState();
                     return;
                 } else if (currentCandidates.length === 0) {
@@ -532,7 +553,7 @@
         function selectCandidate(index) {
             const selectedCandidate = currentCandidates[index]; 
             if (selectedCandidate) {
-                textOutput.textContent += selectedCandidate;
+                insertTextAtCaret(selectedCandidate); // 使用 insertTextAtCaret
                 resetInputState();
             }
         }
@@ -542,9 +563,10 @@
             currentCode = '';
             currentCandidates = [];
 
-            // 更新輸入提示文字
+            // 更新輸入提示文字 (純文字)
             mainInput.textContent = isEnglishMode ? '英文模式' : '編碼顯示在此';
             showCandidates();
+            focusAndMoveCaretToEnd(); // 重設後確保游標在輸出區
         }
 
         // --- 格式化編碼顯示 ---
@@ -560,23 +582,20 @@
         // --- 更新鍵盤按鍵顯示 ---
         function updateKeyboardDisplay() {
             const map = getCurrentDisplayMap();
-            // 中文模式下，字母鍵的視覺始終是 letter_maps.cn_normal (大寫 A-Z)
             const letterMap = isEnglishMode ? (isShiftActive ? letter_maps.en_shifted : letter_maps.en_normal) : letter_maps.cn_normal;
 
             document.querySelectorAll('.key[data-code]').forEach(keyElement => {
                 const code = keyElement.dataset.code;
 
                 if (map[code]) {
-                    // 處理非字母鍵和特殊功能鍵 (包括 ' ')
                     keyElement.textContent = map[code];
                 } else if (code.match(/^[a-z]$/)) {
-                    // 處理字母鍵 (a-z)
                     keyElement.textContent = letterMap(code);
                 }
             });
         }
 
-        // --- 動態生成手機優化鍵盤 (符號鍵位置修正) ---
+        // --- 動態生成手機優化鍵盤 (無變動) ---
         function generateMobileKeyboard() {
             const layout_mobile = [
                 ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'], 
@@ -598,7 +617,6 @@
 
                     let code = keyText.toLowerCase();
 
-                    // 設定 data-code 和樣式
                     if (keyText === 'Back') {
                         code = 'backspace';
                         key.classList.add('function-key');
@@ -618,23 +636,25 @@
 
                     key.dataset.code = code;
 
-                    // 初始顯示: 根據初始模式 (中文, normal) 顯示正確的圖示或文字
                     const initialMap = getCurrentDisplayMap();
                     if (initialMap[code]) {
                          key.textContent = initialMap[code];
                     } else if (code.match(/^[a-z]$/)) {
                          key.textContent = letter_maps.cn_normal(code);
                     } else {
-                         key.textContent = keyText; // 保險措施
+                         key.textContent = keyText; 
                     }
 
                     // --- 鍵盤點擊事件 ---
-                    key.addEventListener('click', () => {
+                    key.addEventListener('click', (event) => {
+                        // 阻止點擊鍵盤時，文字輸出區失去焦點
+                        event.preventDefault(); 
+
                         if (code === 'lang_toggle') {
                             isEnglishMode = !isEnglishMode;
                             isShiftActive = false; 
                             updateKeyboardDisplay();
-                            resetInputState(); // 模式切換後重設輸入狀態並更新提示文字
+                            resetInputState(); 
                         } else if (code === 'case_shift') {
                             isShiftActive = !isShiftActive; 
                             updateKeyboardDisplay();
@@ -656,7 +676,8 @@
          * 複製文字
          */
         function copyTextToClipboard() {
-            const textToCopy = textOutput.textContent;
+            // contenteditable 區域的文字內容
+            const textToCopy = textOutput.textContent; 
             if (!textToCopy) {
                 alert('輸出區沒有文字可以複製！');
                 return;
@@ -682,6 +703,7 @@
                 }
                 document.body.removeChild(tempInput);
             }
+            focusAndMoveCaretToEnd(); // 複製後，游標保持活躍
         }
 
         /**
@@ -691,6 +713,7 @@
             if (confirm('確定要清空所有已輸入的文字嗎？')) {
                 textOutput.textContent = '';
                 resetInputState();
+                focusAndMoveCaretToEnd(); // 清空後確保游標在輸出區
             }
         }