From d2bd2ee53495d234d2c42888e1f7e0da031a00ab Mon Sep 17 00:00:00 2001
From: root <root@localhost.localdomain>
Date: Fri, 26 Jun 2026 23:12:30 +0800
Subject: [PATCH] =?utf8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF=E8=BE=93=E5=85=A5?=
 =?utf8?q?=E6=A1=86:=20=E5=BC=BA=E5=88=B6=E8=8B=B1=E6=96=87=E8=BE=93?=
 =?utf8?q?=E5=85=A5=E6=B3=95=E3=80=81=E9=A6=96=E5=AD=97=E6=AF=8D=E4=B8=8D?=
 =?utf8?q?=E5=A4=A7=E5=86=99=E3=80=81=E9=98=B2=E9=81=AE=E6=8C=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

- inputProps 增加 lang="en"、type="text"，配合 inputMode="latin"
  在 iOS/Android 上唤起英文/拉丁字母软键盘，避免中文输入法
- autoCapitalize="off" 禁止首字母自动大写
- 输入框 CSS 加 scroll-margin-bottom: 80px，软键盘弹出时
  浏览器自动滚动保证输入框可见，避免被遮挡
---
 frontend/src/components/StudyMode.css |  2 ++
 frontend/src/components/StudyMode.js  | 14 ++++++++------
 frontend/src/components/TestMode.css  |  4 ++++
 frontend/src/components/TestMode.js   | 14 ++++++++------
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/StudyMode.css b/frontend/src/components/StudyMode.css
index a1404b6..360a7e4 100644
--- a/frontend/src/components/StudyMode.css
+++ b/frontend/src/components/StudyMode.css
@@ -134,6 +134,8 @@ input {
     border-radius: 10px;
     margin-top: 20px;
     outline: none;
+    /* 软键盘弹出时保证输入框可见 */
+    scroll-margin-bottom: 80px;
 }
 
 input:focus {
diff --git a/frontend/src/components/StudyMode.js b/frontend/src/components/StudyMode.js
index 1edaa74..b64de3b 100644
--- a/frontend/src/components/StudyMode.js
+++ b/frontend/src/components/StudyMode.js
@@ -113,16 +113,18 @@ function StudyMode() {
     // 阻止复制/剪切/粘贴/右键，防止单词被复制后粘贴作弊
     const blockClipboard = (e) => e.preventDefault();
 
-    // 输入框统一属性：禁用粘贴/右键/输入法联想/自动补全，强制逐字母键盘输入
+    // 输入框统一属性：强制英文输入、禁用中文输入法/自动大写/自动补全/粘贴
     const inputProps = {
-        onPaste: blockClipboard,
-        onContextMenu: blockClipboard,
-        onCompositionStart: blockClipboard, // 阻止输入法联想
+        type: "text",
+        lang: "en",
+        inputMode: "latin",          // 唤起英文/拉丁字母软键盘
         autoComplete: "off",
         autoCorrect: "off",
-        autoCapitalize: "off",
+        autoCapitalize: "off",       // 首字母不大写
         spellCheck: false,
-        inputMode: "latin",
+        onPaste: blockClipboard,
+        onContextMenu: blockClipboard,
+        onCompositionStart: blockClipboard, // 阻止输入法联想
     };
 
     return (
diff --git a/frontend/src/components/TestMode.css b/frontend/src/components/TestMode.css
index d324d2e..3a07c45 100644
--- a/frontend/src/components/TestMode.css
+++ b/frontend/src/components/TestMode.css
@@ -135,6 +135,8 @@
     border: 2px solid #ddd;
     border-radius: 10px;
     outline: none;
+    /* 软键盘弹出时保证输入框可见 */
+    scroll-margin-bottom: 80px;
 }
 
 .test-input:focus {
@@ -254,6 +256,8 @@
     border: 2px solid #ddd;
     border-radius: 10px;
     outline: none;
+    /* 软键盘弹出时保证输入框可见 */
+    scroll-margin-bottom: 80px;
 }
 
 .copy-input:focus {
diff --git a/frontend/src/components/TestMode.js b/frontend/src/components/TestMode.js
index 7c638f9..0184174 100644
--- a/frontend/src/components/TestMode.js
+++ b/frontend/src/components/TestMode.js
@@ -151,16 +151,18 @@ function TestMode() {
     // 阻止复制/剪切/粘贴/右键，防止单词被复制后粘贴作弊
     const blockClipboard = (e) => e.preventDefault();
 
-    // 输入框统一属性：禁用粘贴/右键/输入法联想/自动补全，强制逐字母键盘输入
+    // 输入框统一属性：强制英文输入、禁用中文输入法/自动大写/自动补全/粘贴
     const inputProps = {
-        onPaste: blockClipboard,
-        onContextMenu: blockClipboard,
-        onCompositionStart: blockClipboard, // 阻止输入法联想
+        type: "text",
+        lang: "en",
+        inputMode: "latin",          // 唤起英文/拉丁字母软键盘
         autoComplete: "off",
         autoCorrect: "off",
-        autoCapitalize: "off",
+        autoCapitalize: "off",       // 首字母不大写
         spellCheck: false,
-        inputMode: "latin",
+        onPaste: blockClipboard,
+        onContextMenu: blockClipboard,
+        onCompositionStart: blockClipboard, // 阻止输入法联想
     };
 
     // 准备阶段
-- 
2.43.0