diff --git a/assets/js/app.js b/assets/js/app.js index 250bb28..63da4b3 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -32,16 +32,26 @@ var seq = 0; // 请求序号:防止先发的慢响应覆盖后发的快响应 var items = []; // 当前展示的建议词 var active = -1; // 选中项下标(键盘 ↓/↑、,/. 与鼠标划过共用);-1 = 没选中 + var punctByKeyDown = false; // 本次标点是否已由 keydown 处理(防 keydown+beforeinput 双触发跳两格) /* 联想词的选中按键(后台「设置 → 联想词按键」): arrows(默认,等同改造前)/ punct / both */ var keyMode = cfg.suggestKeys || 'arrows'; function acceptsArrows() { return keyMode === 'arrows' || keyMode === 'both'; } function acceptsPunct() { return keyMode === 'punct' || keyMode === 'both'; } - /* ⚠️ 认**物理键**而不是字符:中文输入法下按逗号打出的是全角「,」,e.key 会变成「,」, - 但 e.code 仍然是 'Comma' —— 「跟输入法一样」就该按物理键认,否则中文用户按不出来。 */ - function isComma(e) { return e.code === 'Comma' || e.key === ','; } - function isPeriod(e) { return e.code === 'Period' || e.key === '.'; } + /* ⚠️ 中文输入法的标点坑(真实用户反馈,2026-09-28): + 中文输入法下按逗号/句号,上屏的是**全角** `,`(U+FF0C) / `。`(U+3002), + 而且此时 e.code **不一定**是 'Comma'/'Period'(取决于浏览器与输入法)—— + 早先只认 `e.code === 'Comma' || e.key === ','`(半角)就是因此漏判, + 结果标点被当普通字符输进了搜索框、没当成选词键。 + 修法:以 e.key 的**字符**为主判据,半角/全角都认,e.code 仅作辅助。 + 全角逗号 = `,`(U+FF0C);全角句号常见是 `。`(U+3002),另兼容全角句点 `.`(U+FF0E)。 */ + function isComma(e) { + return e.key === ',' || e.key === '\uFF0C' || e.code === 'Comma'; + } + function isPeriod(e) { + return e.key === '.' || e.key === '\u3002' || e.key === '\uFF0E' || e.code === 'Period'; + } function hideWord() { if (word) { word.innerHTML = ''; word.style.display = 'none'; } @@ -93,6 +103,11 @@ }); input.addEventListener('keydown', function (e) { + // ⚠️ IME 组合态保护:用中文输入法**打拼音**时也会触发 keydown(isComposing=true, + // 或 keyCode=229),那些按键属于输入法自己的候选选择,不能当成选联想词的键拦下来。 + // 组合结束(拼音上屏)后 isComposing=false,下面的 , / . 选词才生效。 + if (e.isComposing || e.keyCode === 229) { return; } + var open = !!word && word.style.display === 'block' && items.length > 0; // 移动选中项:只动高亮、不动输入框(回车时才落到输入框)。 @@ -110,12 +125,11 @@ // ⚠️ 没有下拉时**必须放行** —— 这时 , 和 . 是正常输入字符(如搜「python, pandas」)。 if (!open) { return; } e.preventDefault(); // 别让光标跳到文本首尾、也别让页面跟着滚 - if (active < 0) { - active = dir > 0 ? 0 : items.length - 1; - } else { - active = (active + dir + items.length) % items.length; - } - paintWord(); + moveSelection(dir); + // 同一次按键 keydown 已经处理过标点 → 标记一下,让紧随其后的 beforeinput 别再移一次, + // 否则会「跳两格」(keydown 与 beforeinput 的真实触发组合因浏览器/输入法而异,jsdom 测不全)。 + punctByKeyDown = true; + setTimeout(function () { punctByKeyDown = false; }, 0); return; } @@ -135,6 +149,36 @@ return; } }); + + /* ⚠️ beforeinput 兜底 —— 专治中文输入法的全角标点(用户实测反馈,2026-09-28)。 + 某些输入法下,按逗号/句号上屏的是全角「,」「。」,这时: + · keydown 的 e.key 可能不是半角,e.code 也可能不是 'Comma'/'Period' → 漏判; + · 或者根本在 isComposing 组合态里被上面那道保护挡掉 → 也漏判。 + beforeinput 在**字符即将插入文本框之前**触发,e.data 就是要插入的字符, + 是拦全角标点最可靠的一道。命中就 preventDefault(不插入)并移动选中项。 + 只在「下拉打开 + punct/both 模式」下生效;没有下拉时不拦,逗号句号照常输入。 */ + input.addEventListener('beforeinput', function (e) { + if (e.inputType !== 'insertText') { return; } + if (punctByKeyDown) { return; } // keydown 已处理过本次标点,别再移一次(防跳两格) + var d = e.data; + if (d === null || d === undefined) { return; } + var open = !!word && word.style.display === 'block' && items.length > 0; + if (!open || !acceptsPunct()) { return; } + var dir = 0; + if (d === ',' || d === '\uFF0C') { dir = -1; } // 半角/全角逗号 + else if (d === '.' || d === '\u3002' || d === '\uFF0E') { dir = 1; } // 半角/全角句号 + if (dir !== 0) { e.preventDefault(); moveSelection(dir); } + }); + } + + /** 移动联想下拉的选中项(keydown 与 beforeinput 共用;dir=-1 上一条 / +1 下一条) */ + function moveSelection(dir) { + if (active < 0) { + active = dir > 0 ? 0 : items.length - 1; + } else { + active = (active + dir + items.length) % items.length; + } + paintWord(); } /* 鼠标划过某条建议 → 同步高亮(与 ↓/↑ 共用 active,回车即可确认) */