From: root <root@localhost.localdomain>
Date: Fri, 26 Jun 2026 15:12:30 +0000 (+0800)
Subject: 手机端输入框: 强制英文输入法、首字母不大写、防遮挡
X-Git-Url: http://acesimba.cloud/gitweb/?a=commitdiff_plain;h=d2bd2ee53495d234d2c42888e1f7e0da031a00ab;p=words.git

手机端输入框: 强制英文输入法、首字母不大写、防遮挡

- inputProps 增加 lang="en"、type="text"，配合 inputMode="latin"
  在 iOS/Android 上唤起英文/拉丁字母软键盘，避免中文输入法
- autoCapitalize="off" 禁止首字母自动大写
- 输入框 CSS 加 scroll-margin-bottom: 80px，软键盘弹出时
  浏览器自动滚动保证输入框可见，避免被遮挡
---

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, // 阻止输入法联想
     };
 
     // 准备阶段