Skip to content

Commit 1a046bd

Browse files
3code-type3code-type
authored
Add files via upload
1 parent 6e8a165 commit 1a046bd

1 file changed

Lines changed: 46 additions & 71 deletions

File tree

‎3code_mobile.html‎

Lines changed: 46 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060

6161
#search-input {
6262
flex-grow: 0;
63-
width: 140px;
63+
width: 120px; /* 修正: 欄寬設為 120px */
6464
height: 40px;
6565
padding: 8px;
6666
font-size: 1.0rem;
@@ -129,7 +129,7 @@
129129
height: 40vh;
130130
font-size: 1.5rem;
131131
line-height: 1.6;
132-
white-space: pre-wrap; /* 修正：將 normal 改為 pre-wrap 以保留連續空白並允許換行 */
132+
white-space: pre-wrap;
133133
word-break: break-word;
134134
color: var(--text-color);
135135
cursor: text;
@@ -198,15 +198,14 @@
198198
}
199199

200200
#candidate-display {
201-
/* 修正 1: 調整最小高度 */
202201
display: flex;
203202
align-items: center;
204203
padding: 8px;
205204
gap: 12px;
206205
white-space: nowrap;
207206
overflow-x: scroll;
208207
-webkit-overflow-scrolling: touch;
209-
min-height: 60px; /* 從 48px 調整為 60px */
208+
min-height: 70px; /* 修正: 候選字區域高度調高到 70px */
210209
background-color: #fff;
211210
box-shadow: 0 1px 0 var(--border-color);
212211
}
@@ -216,14 +215,13 @@
216215
}
217216

218217
#candidate-display span {
219-
/* 修正 2: 調整字型大小 */
220218
cursor: pointer;
221219
padding: 5px 8px;
222220
border-radius: 4px;
223221
transition: all 0.2s;
224222
user-select: none;
225223
white-space: nowrap;
226-
font-size: 1.4rem; /* 從 1.2rem 調整為 1.4rem */
224+
font-size: 1.6rem; /* 修正: 候選字型加大到 1.6rem */
227225
flex-shrink: 0;
228226
text-align: center;
229227
}
@@ -275,8 +273,17 @@
275273
min-width: 0;
276274
}
277275

276+
/* *** 新增: 強化 Enter 鍵的視覺效果 (data-code="13" 是 KEYCODE_ENTER) *** */
277+
.keyboard-key[data-code="13"] .visual-wrapper > span {
278+
font-size: 1.5rem;
279+
font-weight: 900;
280+
}
281+
.keyboard-key[data-code="13"] {
282+
font-weight: bold;
283+
}
284+
/* *************************************************************** */
285+
278286
.keyboard-key.highlighted {
279-
/* 用於 touchstart/mousedown 設置的高亮狀態 */
280287
background-color: var(--key-active-bg) !important;
281288
color: white;
282289
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -316,7 +323,6 @@
316323
}
317324

318325
.keyboard-key:active {
319-
/* 作為降級/輔助的點擊視覺效果，但在 touchstart 設置 highlighted 後會被覆蓋 */
320326
background-color: var(--key-active-bg);
321327
color: white;
322328
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
@@ -350,8 +356,7 @@
350356

351357
<div class="search-area">
352358
<input type="text" id="search-input" placeholder="在此輸入文字" maxlength="1">
353-
<div id="search-result">查詢結果顯示在此</div>
354-
</div>
359+
<div id="search-result">編碼顯示在此</div> </div>
355360

356361
<div id="toolbar">
357362
<button id="copy-btn">📋 複製文字</button>
@@ -385,7 +390,7 @@
385390
// --- 長按相關狀態 ---
386391
let longPressTimer = null;
387392
let longPressCommitted = false;
388-
const LONG_PRESS_TIMEOUT = 750;
393+
const LONG_PRESS_TIMEOUT = 500;
389394

390395
// --- 游標 HTML 定義 ---
391396
const CURSOR_HTML = '<span id="main-cursor" class="cursor">\u200c</span>';
@@ -418,7 +423,7 @@
418423
const KEYCODE_ENTER=0x0d;
419424
const KEYCODE_SPACE=0x20;
420425

421-
// --- 鍵盤配置 (略) ---
426+
// --- 鍵盤配置 ---
422427
var Keyboards = {
423428
english: {
424429
shifted : false,
@@ -514,7 +519,7 @@
514519
}
515520

516521
/**
517-
* 鍵盤渲染函數 (略)
522+
* 鍵盤渲染函數
518523
*/
519524
function drawKeyboard() {
520525
const layout = currentLayout;
@@ -539,7 +544,7 @@
539544
const keyWidth = placeHolderWidth * ratio;
540545

541546
let displayChar = keyChar;
542-
let isSymbolShifted = false; // 新增：判斷是否為數字/符號鍵盤的 Shift 鍵
547+
let isSymbolShifted = false;
543548

544549
// --- FIX: 處理數字/符號鍵盤 (Keyboards.number) 的 Shift 顯示 ---
545550
if (currentLayout === Keyboards.number && code === 0) {
@@ -578,14 +583,12 @@
578583
// 英文模式 (無論 Shift On/Off): 顯示半形符號 (符合最新要求)
579584
displayChar = keyChar;
580585
}
581-
// 移除原有的: else if (layout.shifted) { displayChar = layout.upper[keyChar] || keyChar; }
582586
}
583587
}
584588

585589
// --- 2. 處理功能鍵文字 (MODE, SHIFT 等，覆蓋 QWERTY 邏輯) ---
586590
if (code === KEYCODE_STATE) {
587591
// 模式切換鍵
588-
// 根據當前鍵盤判斷 MODE 鍵的顯示狀態
589592
if (currentLayout === Keyboards.english) {
590593
// QWERTY 鍵盤上顯示當前模式
591594
displayChar = isEnglishMode ? 'En' : '三碼';
@@ -677,7 +680,7 @@
677680
}
678681

679682
/**
680-
* 浮層處理函數 (略)
683+
* 浮層處理函數 (保持不變)
681684
*/
682685
function emoji(subIndex) {
683686
const emojis=[[
@@ -740,7 +743,7 @@
740743
}
741744

742745
/**
743-
* 處理短按事件：執行編碼或普通字符輸入 (略)
746+
* 處理短按事件：執行編碼或普通字符輸入
744747
*/
745748
function handleShortPress(keyElement) {
746749
preferredOffset = -1;
@@ -785,7 +788,7 @@
785788
}
786789

787790
/**
788-
* 處理功能鍵邏輯 (略)
791+
* 處理功能鍵邏輯
789792
*/
790793
function handleFunctionKey(code, keyChar) {
791794
switch(code) {
@@ -876,18 +879,6 @@
876879
*/
877880
function bindKeyEvents() {
878881
document.querySelectorAll('.keyboard-key').forEach(keyElement => {
879-
880-
// 1. 為了避免重複綁定，先移除可能已經存在的舊事件處理器 (通過儲存在元素上的屬性)
881-
if (keyElement.handlePressDown) {
882-
keyElement.removeEventListener('touchstart', keyElement.handlePressDown);
883-
keyElement.removeEventListener('touchend', keyElement.handlePressUp);
884-
keyElement.removeEventListener('touchcancel', keyElement.handlePressCancel);
885-
keyElement.removeEventListener('mousedown', keyElement.handlePressDown);
886-
keyElement.removeEventListener('mouseup', keyElement.handlePressUp);
887-
keyElement.removeEventListener('mouseleave', keyElement.handlePressCancel);
888-
}
889-
890-
// 清空舊的 onxxx 屬性 (略)
891882
keyElement.onclick = null;
892883
keyElement.oncontextmenu = (e) => e.preventDefault();
893884
keyElement.ontouchstart = null;
@@ -896,19 +887,14 @@
896887
keyElement.onmousedown = null;
897888
keyElement.onmouseup = null;
898889
keyElement.onmouseleave = null;
899-
890+
900891
const keyChar = keyElement.dataset.label;
901-
// 修正 altChar 檢查，防止 currentLayout.alt 未定義時出錯
902-
const altChar = currentLayout.alt ? currentLayout.alt[keyChar] : null;
892+
const altChar = currentLayout.alt[keyChar];
903893

904-
// 1. 處理按下 (Press Down)
905894
const handlePressDown = (event) => {
906-
// 只處理左鍵點擊 (滑鼠) 或觸摸事件
907-
if (event.type === 'mousedown' && event.button !== 0) return;
908-
if (event.type.startsWith('touch')) event.preventDefault();
909-
895+
event.preventDefault();
910896
longPressCommitted = false;
911-
keyElement.classList.add('highlighted'); // **添加高亮**
897+
keyElement.classList.add('highlighted');
912898

913899
if (currentLayout === Keyboards.english && altChar) {
914900
if (longPressTimer) clearTimeout(longPressTimer);
@@ -917,59 +903,46 @@
917903
}, LONG_PRESS_TIMEOUT);
918904
}
919905
};
920-
921-
// 2. 處理抬起/點擊 (Press Up)
922-
const handlePressUp = (event) => {
923-
// if (event.type.startsWith('touch')) event.preventDefault(); // 移除 preventDefault
924906

907+
const handlePressUp = (event) => {
908+
event.preventDefault();
909+
keyElement.classList.remove('highlighted');
910+
925911
if (longPressTimer) {
926912
clearTimeout(longPressTimer);
927913
longPressTimer = null;
928914
}
929915

930-
// 只要不是長按提交的，就視為短按並觸發輸入
931-
if (!longPressCommitted) {
916+
if (!longPressCommitted) {
932917
handleShortPress(keyElement);
933918
}
934-
935-
// 無論如何，抬起時都移除高亮
936-
keyElement.classList.remove('highlighted');
937919
longPressCommitted = false;
938920
};
939921

940-
// 3. 處理取消 (Move/Leave/Cancel)
941-
const handlePressCancel = (event) => { // 接受 event
942-
// **重要修正：touchmove 不再觸發此函數來取消計時器**
922+
const handlePressCancel = () => {
943923
if (longPressTimer) {
944924
clearTimeout(longPressTimer);
945925
longPressTimer = null;
946926
}
947-
// 只有在滑鼠離開 (mouseleave) 或系統明確取消 (touchcancel) 時，才移除高亮。
948-
if (event.type === 'mouseleave' || event.type === 'touchcancel') {
949-
keyElement.classList.remove('highlighted');
950-
}
927+
keyElement.classList.remove('highlighted');
951928
};
952929

953-
// 將函數儲存在 DOM 元素上以便移除
954-
keyElement.handlePressDown = handlePressDown;
955-
keyElement.handlePressUp = handlePressUp;
956-
keyElement.handlePressCancel = handlePressCancel;
957-
958-
// Touch Events
959930
keyElement.addEventListener('touchstart', handlePressDown);
960931
keyElement.addEventListener('touchend', handlePressUp);
961-
keyElement.addEventListener('touchcancel', handlePressCancel); // 處理觸摸中斷
962-
// *** 核心修正：移除 touchmove 綁定 ***
932+
keyElement.addEventListener('touchmove', handlePressCancel);
963933

964-
// Mouse Events (用於桌面測試)
965-
keyElement.addEventListener('mousedown', handlePressDown);
934+
keyElement.addEventListener('mousedown', (e) => {
935+
if (e.button === 0) {
936+
handlePressDown(e);
937+
}
938+
});
966939
keyElement.addEventListener('mouseup', handlePressUp);
967940
keyElement.addEventListener('mouseleave', handlePressCancel);
968941
});
969942
}
970943

971944
/**
972-
* 處理單字符輸入 (用於英文/符號模式或 Shift+字母) (略)
945+
* 處理單字符輸入 (用於英文/符號模式或 Shift+字母)
973946
*/
974947
function handleCharInput(char) {
975948
if (currentLayout.shifted) {
@@ -984,7 +957,7 @@
984957
}
985958
}
986959

987-
// --- 核心輸入法邏輯 (其餘部分略) ---
960+
// --- 核心輸入法邏輯 (其餘部分保持不變) ---
988961

989962
var currentCode = '';
990963
var currentCandidates = [];
@@ -1246,7 +1219,7 @@
12461219
updateOutputDisplay();
12471220
}
12481221

1249-
// --- 工具列與查碼功能 (其餘部分略) ---
1222+
// --- 工具列與查碼功能 (已調整) ---
12501223

12511224
function copyTextToClipboard() {
12521225
const textToCopy = committedText;
@@ -1286,20 +1259,22 @@
12861259
resetInputState();
12871260
}
12881261
}
1262+
12891263
function handleSearchInput(event) {
12901264
const charToSearch = searchInput.value;
12911265
if (charToSearch.length === 1) {
12921266
const codes = currentReverseCodemap[charToSearch];
12931267
if (codes && codes.length > 0) {
12941268
const formattedCodes = codes.map(code => formatCode(code));
1295-
searchResult.textContent = `編碼：　${formattedCodes.join('　')}`;
1269+
searchResult.textContent = `${formattedCodes.join('　')}`; // 修正: 移除「編碼：　」字樣
12961270
} else {
12971271
searchResult.textContent = '找不到該字符的編碼。';
12981272
}
12991273
} else {
1300-
searchResult.textContent = '查詢結果顯示在此';
1274+
searchResult.textContent = '編碼顯示在此'; // 修正: 更新為新版預設文字
13011275
}
13021276
}
1277+
13031278
function handleSearchKeydown(event) { if (event.key === 'Backspace') { event.stopPropagation(); } }
13041279

13051280
function mapDOMOffsetToTextIndex(targetNode, targetOffset) {

0 commit comments

Comments
 (0)