输入框禁用粘贴与输入法联想，强制逐字母输入

diff --git a/frontend/src/components/StudyMode.js b/frontend/src/components/StudyMode.js
index e612ec5c4530628826e3d58eb2025d99c284a890..66122d1f112f2bcbafac735b8b19cf4aa31236b8 100644 (file)
--- 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 17de7141c58c15f8ac039e3ce3670f4b98ea3647..9c255844bd3386292f66081aeef0a2e07ed141b2 100644 (file)
--- 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 ? '✅' : '❌'}