Skip to content

Commit 22a6d83

Browse files
3code-type3code-type
authored
Add files via upload
1 parent abd43b9 commit 22a6d83

1 file changed

Lines changed: 36 additions & 49 deletions

File tree

‎3code_mobile.html‎

Lines changed: 36 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
margin: 0;
2929
padding: 0;
3030
box-sizing: border-box;
31-
-webkit-tap-highlight-color: transparent; /* 移除點擊高亮 */
31+
-webkit-tap-highlight-color: transparent;
3232
outline: none;
3333
}
3434

@@ -124,15 +124,15 @@
124124
overflow-x: auto;
125125
}
126126

127-
/* === 候選字區域：修改為橫向滑動 === */
127+
/* 候選字區域：橫向滑動 */
128128
#candidate-display {
129-
display: flex; /* 確保內容在同一行 */
129+
display: flex;
130130
align-items: center;
131131
padding: 8px;
132-
gap: 12px; /* 增加間距 */
133-
white-space: nowrap; /* 內容不換行 */
134-
overflow-x: scroll; /* 允許橫向滾動 */
135-
-webkit-overflow-scrolling: touch; /* 改善 iOS 上的滑動體驗 */
132+
gap: 12px;
133+
white-space: nowrap;
134+
overflow-x: scroll;
135+
-webkit-overflow-scrolling: touch;
136136
min-height: 40px;
137137
}
138138

@@ -148,24 +148,15 @@
148148
transition: all 0.2s;
149149
user-select: none;
150150
white-space: nowrap;
151-
font-size: 1.2rem; /* 稍大一點的字體 */
152-
flex-shrink: 0; /* 確保文字不被壓縮 */
151+
font-size: 1.2rem;
152+
flex-shrink: 0;
153153
text-align: center;
154154
}
155155

156156
#candidate-display span:active, #candidate-display span:hover {
157157
background-color: #e8eaf6;
158158
}
159159

160-
#mode-display {
161-
font-size: 1rem;
162-
color: #757575;
163-
align-self: flex-start;
164-
padding: 0 10px 10px;
165-
width: 100%;
166-
text-align: right;
167-
}
168-
169160
/* ------------------ 虛擬鍵盤 ------------------ */
170161
.keyboard-container {
171162
width: 100%;
@@ -240,8 +231,7 @@
240231
<div id="candidate-display">候選字顯示在此...</div>
241232
</div>
242233

243-
<div id="mode-display">模式：三碼次常</div>
244-
</div>
234+
</div>
245235

246236
<div class="keyboard-container" id="keyboard-container">
247237
</div>
@@ -251,36 +241,38 @@
251241
let currentCodemap = {};
252242
let currentReverseCodemap = {};
253243

244+
// 中文模式下的鍵盤顯示 (Shift 鍵顯示為 '三碼')
254245
const keyname_map_upper = {
255246
'a': 'Ａ', 'b': 'Ｂ', 'c': 'Ｃ', 'd': 'Ｄ', 'e': 'Ｅ', 'f': 'Ｆ', 'g': 'Ｇ',
256247
'h': 'Ｈ', 'i': 'Ｉ', 'j': 'Ｊ', 'k': 'Ｋ', 'l': 'Ｌ', 'm': 'Ｍ', 'n': 'Ｎ',
257248
'o': 'Ｏ', 'p': 'Ｐ', 'q': 'Ｑ', 'r': 'Ｒ', 's': 'Ｓ', 't': 'Ｔ', 'u': 'Ｕ',
258249
'v': 'Ｖ', 'w': 'Ｗ', 'x': 'Ｘ', 'y': 'Ｙ', 'z': 'Ｚ',
259-
// 符號對應 (按鍵顯示)
260-
"'": "〃", ';': '；', ',': '，', '.': '．', '/': '／', ' ': '空白鍵', 'enter': 'Enter', 'backspace': '刪除鍵', 'shift': '中/英',
250+
// 符號對應
251+
"'": "〃", ';': '；', ',': '，', '.': '．', '/': '／', ' ': '空白鍵', 'enter': 'Enter', 'backspace': '刪除鍵',
252+
'shift': '三碼', // *** 修正: 中文模式顯示 '三碼'
261253
};
254+
// 英文模式下的鍵盤顯示 (Shift 鍵顯示為 'En')
262255
const keyname_map_lower = {
263256
'a': 'a', 'b': 'b', 'c': 'c', 'd': 'd', 'e': 'e', 'f': 'f', 'g': 'g',
264257
'h': 'h', 'i': 'i', 'j': 'j', 'k': 'k', 'l': 'l', 'm': 'm', 'n': 'n',
265258
'o': 'o', 'p': 'p', 'q': 'q', 'r': 'r', 's': 's', 't': 't', 'u': 'u',
266259
'v': 'v', 'w': 'w', 'x': 'x', 'y': 'y', 'z': 'z',
267-
"'": "'", ';': ';', ',': ',', '.': '.', '/': '/', ' ': ' ', 'enter': 'Enter', 'backspace': '刪除鍵', 'shift': '中/英',
260+
"'": "'", ';': ';', ',': ',', '.': '.', '/': '/', ' ': ' ', 'enter': 'Enter', 'backspace': '刪除鍵',
261+
'shift': 'En', // *** 修正: 英文模式顯示 'En'
268262
};
269263

270264
// DOM 元素
271265
const textOutput = document.getElementById('text-output');
272266
const mainInput = document.getElementById('main-input');
273267
const candidateDisplay = document.getElementById('candidate-display');
274268
const keyboardContainer = document.getElementById('keyboard-container');
275-
const modeDisplay = document.getElementById('mode-display');
269+
// const modeDisplay = document.getElementById('mode-display'); // 已移除
276270
const copyButton = document.getElementById('copy-btn');
277271
const clearButton = document.getElementById('clear-btn');
278272

279273
const MAX_CODE_LENGTH = 3;
280274
let currentCode = '';
281275
let currentCandidates = [];
282-
// let currentPage = 0; // 已移除分頁邏輯
283-
// const candidatesPerPage = 10; // 已移除分頁邏輯
284276
let isEnglishMode = false;
285277

286278
function parseCinData(data) {
@@ -319,7 +311,7 @@
319311
const { newCodemap, newReverseCodemap } = parseCinData(text);
320312
currentCodemap = newCodemap;
321313
currentReverseCodemap = newReverseCodemap;
322-
updateModeDisplay();
314+
// updateModeDisplay(); // 已移除
323315
mainInput.textContent = '編碼表載入成功';
324316
} catch (error) {
325317
console.error(`載入 ${fileName} 時發生錯誤:`, error);
@@ -346,18 +338,18 @@
346338
}
347339
if (code === 'enter') {
348340
if (currentCandidates.length > 0) {
349-
selectCandidate(0); // 選第一個候選字上字
341+
selectCandidate(0);
350342
} else {
351-
textOutput.textContent += '\n'; // 換行
343+
textOutput.textContent += '\n';
352344
}
353345
return;
354346
}
355347

356348
if (code === ' ') {
357349
if (currentCandidates.length > 0) {
358-
selectCandidate(0); // 選第一個候選字上字
350+
selectCandidate(0);
359351
} else {
360-
textOutput.textContent += '　'; // 輸出全形空格
352+
textOutput.textContent += '　';
361353
}
362354
return;
363355
}
@@ -367,7 +359,7 @@
367359
if (inputChar.match(/^[a-z;'./,<>]$/)) {
368360
if (currentCode.length === MAX_CODE_LENGTH) {
369361
if (currentCandidates.length > 0) {
370-
selectCandidate(0); // 超過三碼，自動選第一個上字
362+
selectCandidate(0);
371363
}
372364
currentCode = inputChar;
373365
} else {
@@ -412,7 +404,6 @@
412404
resetInputState();
413405
return;
414406
} else if (currentCandidates.length === 0) {
415-
// 如果沒有候選字，清空輸入，不做任何輸出
416407
resetInputState();
417408
return;
418409
}
@@ -421,7 +412,7 @@
421412
showCandidates();
422413
}
423414

424-
// --- 顯示候選字為**滑動列表 (已移除編號和分頁)** ---
415+
// --- 顯示候選字為滑動列表 ---
425416
function showCandidates() {
426417
candidateDisplay.innerHTML = '';
427418

@@ -433,23 +424,18 @@
433424
return;
434425
}
435426

436-
// 顯示所有候選字
437427
currentCandidates.forEach((candidate, index) => {
438428
const span = document.createElement('span');
439-
// 不顯示編號
440429
span.textContent = candidate;
441-
// 直接使用陣列索引
442430
span.onclick = () => selectCandidate(index);
443431
candidateDisplay.appendChild(span);
444432
});
445433

446-
// 確保候選字滾動到最左邊
447434
candidateDisplay.scrollLeft = 0;
448435
}
449436

450-
// --- 選擇候選字並清空輸入 (已移除分頁邏輯) ---
437+
// --- 選擇候選字並清空輸入 ---
451438
function selectCandidate(index) {
452-
// 使用絕對索引
453439
const selectedCandidate = currentCandidates[index];
454440
if (selectedCandidate) {
455441
textOutput.textContent += selectedCandidate;
@@ -461,21 +447,20 @@
461447
function resetInputState() {
462448
currentCode = '';
463449
currentCandidates = [];
464-
mainInput.textContent = '編碼顯示在此';
450+
mainInput.textContent = isEnglishMode ? '英文模式' : '編碼顯示在此';
465451
showCandidates();
466452
}
467453

468454
// --- 格式化編碼顯示 ---
469455
function formatCode(code) {
470456
let displayString = '';
471457
for (const char of code) {
472-
// 使用大寫字母/全形符號顯示編碼
473458
displayString += keyname_map_upper[char] || char.toUpperCase();
474459
}
475460
return displayString;
476461
}
477462

478-
// --- 更新鍵盤按鍵顯示 ---
463+
// --- 更新鍵盤按鍵顯示 (專門處理 Shift 鍵的變動) ---
479464
function updateKeyboardDisplay() {
480465
const map = isEnglishMode ? keyname_map_lower : keyname_map_upper;
481466
document.querySelectorAll('.key[data-code]').forEach(keyElement => {
@@ -484,13 +469,14 @@
484469
keyElement.textContent = map[code];
485470
}
486471
});
472+
473+
// 確保 Shift 鍵在模式切換時正確顯示
474+
const shiftKey = document.querySelector('.key[data-code="shift"]');
475+
if (shiftKey) {
476+
shiftKey.textContent = isEnglishMode ? keyname_map_lower['shift'] : keyname_map_upper['shift'];
477+
}
487478
}
488479

489-
// --- 更新模式顯示 ---
490-
function updateModeDisplay() {
491-
modeDisplay.textContent = isEnglishMode ? '模式：英文' : '模式：三碼次常';
492-
}
493-
494480
// --- 動態生成手機優化鍵盤 ---
495481
function generateMobileKeyboard() {
496482
const layout_mobile = [
@@ -528,12 +514,13 @@
528514
}
529515

530516
key.dataset.code = code;
517+
// 初始顯示為中文模式 ('三碼')
531518
key.textContent = keyname_map_upper[code] || keyText;
532519

533520
key.addEventListener('click', () => {
534521
if (code === 'shift') {
535522
isEnglishMode = !isEnglishMode;
536-
updateModeDisplay();
523+
// updateModeDisplay(); // 已移除
537524
updateKeyboardDisplay();
538525
resetInputState();
539526
} else if (isEnglishMode) {

0 commit comments

Comments
 (0)