From f46aab89798a8af130938c0e0bdd0b0b8ca4c9bc Mon Sep 17 00:00:00 2001
From: root <root@localhost.localdomain>
Date: Thu, 18 Jun 2026 08:12:03 +0800
Subject: [PATCH] =?utf8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E7=A6=81=E7=94=A8?=
 =?utf8?q?=E7=B2=98=E8=B4=B4=E4=B8=8E=E8=BE=93=E5=85=A5=E6=B3=95=E8=81=94?=
 =?utf8?q?=E6=83=B3=EF=BC=8C=E5=BC=BA=E5=88=B6=E9=80=90=E5=AD=97=E6=AF=8D?=
 =?utf8?q?=E8=BE=93=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/StudyMode.js | 18 ++++++++++++++++--
 frontend/src/components/TestMode.js  | 14 ++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/StudyMode.js b/frontend/src/components/StudyMode.js
index e612ec5..66122d1 100644
--- a/frontend/src/components/StudyMode.js
+++ b/frontend/src/components/StudyMode.js
@@ -102,6 +102,18 @@ function StudyMode() {
     // 阻止复制/剪切/粘贴/右键，防止单词被复制后粘贴作弊
     const blockClipboard = (e) => e.preventDefault();
 
+    // 输入框统一属性：禁用粘贴/右键/输入法联想/自动补全，强制逐字母键盘输入
+    const inputProps = {
+        onPaste: blockClipboard,
+        onContextMenu: blockClipboard,
+        onCompositionStart: blockClipboard, // 阻止输入法联想
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "off",
+        spellCheck: false,
+        inputMode: "latin",
+    };
+
     return (
         <div
             className="study-container"
@@ -143,12 +155,13 @@ function StudyMode() {
                         <div className="flashcard-area">
                             <h2 className="flashcard-title">闪记模式：请拼写单词</h2>
                             <p className="flashcard-hint">中文含义：{currentWord.chinese_meaning}</p>
-                            <input 
+                            <input
                                 autoFocus
                                 value={userInput}
                                 onChange={(e) => setUserInput(e.target.value)}
                                 onKeyDown={(e) => e.key === 'Enter' && checkFlashcard()}
                                 placeholder="输入英文单词..."
+                                {...inputProps}
                             />
                             <button className="action-btn" onClick={checkFlashcard}>检查 (Enter)</button>
                         </div>
@@ -156,7 +169,7 @@ function StudyMode() {
                         <div className="correction-area">
                             <h2 className="error-tip">回答错误！正确答案：{currentWord.word}</h2>
                             <p>请抄写一遍以解锁：</p>
-                            <input 
+                            <input
                                 autoFocus
                                 className={correctionInput === currentWord.word ? "correct" : "typing"}
                                 value={correctionInput}
@@ -167,6 +180,7 @@ function StudyMode() {
                                     }
                                 }}
                                 placeholder="请在此抄写..."
+                                {...inputProps}
                             />
                             {correctionInput === currentWord.word && (
                                 <button className="action-btn" onClick={() => setPhase('flashcard')}>
diff --git a/frontend/src/components/TestMode.js b/frontend/src/components/TestMode.js
index 17de714..9c25584 100644
--- a/frontend/src/components/TestMode.js
+++ b/frontend/src/components/TestMode.js
@@ -150,6 +150,18 @@ function TestMode() {
     // 阻止复制/剪切/粘贴/右键，防止单词被复制后粘贴作弊
     const blockClipboard = (e) => e.preventDefault();
 
+    // 输入框统一属性：禁用粘贴/右键/输入法联想/自动补全，强制逐字母键盘输入
+    const inputProps = {
+        onPaste: blockClipboard,
+        onContextMenu: blockClipboard,
+        onCompositionStart: blockClipboard, // 阻止输入法联想
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "off",
+        spellCheck: false,
+        inputMode: "latin",
+    };
+
     // 准备阶段
     if (words.length === 0) return <div className="loading">加载中...</div>;
 
@@ -245,6 +257,7 @@ function TestMode() {
                                     onChange={(e) => setUserInput(e.target.value)}
                                     placeholder="请输入英文单词..."
                                     className="test-input"
+                                    {...inputProps}
                                 />
                                 <button className="action-btn" onClick={checkAnswer}>提交</button>
                             </div>
@@ -305,6 +318,7 @@ function TestMode() {
                                 onChange={(e) => setCopyInput(e.target.value)}
                                 className={`copy-input ${copyInput === currentWord.word ? 'correct' : ''}`}
                                 placeholder="请在此抄写正确单词..."
+                                {...inputProps}
                             />
                             <span className={`copy-check ${copyInput === currentWord.word ? 'ok' : ''}`}>
                                 {copyInput === currentWord.word ? '✅' : '❌'}
-- 
2.43.0