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

- 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 a1404b619e02abf93ccd47062f08671d2ee2e016..360a7e4b216552fa45b6c2f0433c4775473baf24 100644 (file)
--- 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 1edaa74cb1ef8f9c9b6d6bed70f8032b12a72bbb..b64de3bee0e58ec7e00614ae819ab215dda2f599 100644 (file)
--- 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 d324d2e3113bae7cee207e5ad0203018361b569a..3a07c453d786afbfd218248c784f9ca96337c56f 100644 (file)
--- 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 7c638f97fef5f0c760de540da98624bff539de39..0184174c5de43d7b58bc033b26ce093fbd270fee 100644 (file)
--- 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, // 阻止输入法联想
     };
 
     // 准备阶段