本文详细阐述了如何构建一个双向同步的回文输入框系统。核心内容包括实现两个输入字段的实时内容同步、精确追踪并镜像用户在两个字段中的光标位置，以及在同步过程中智能过滤空格和标点符号，确保非活跃字段始终保持纯净的反转字母序列。通过分解任务、运用正则表达式和精细的光标定位算法，本文提供了一套实现此类复杂交互的专业指南。
引言：构建智能回文输入系统
在现代Web应用中，用户界面的交互性和智能化日益重要。本文将探讨如何设计并实现一个高级的JavaScript回文输入系统。该系统要求用户在两个文本输入框中输入内容时，能够实时保持回文状态，并具备以下核心功能：
- 双向编辑： 两个输入框均可编辑。
- 光标同步： 用户在一个输入框中移动光标时，另一个输入框的光标位置会同步镜像。
- 文本镜像： 用户在一个输入框中输入字符时，这些字符（经过处理后）会实时镜像到另一个输入框。
- 字符过滤： 在文本镜像过程中，空格和标点符号等非字母字符会被自动过滤，不会出现在镜像字段中。
- 光标位置的智能调整： 镜像字段中的光标位置需要考虑被过滤的字符，以确保其逻辑上的正确对应。
为了更好地理解这一需求，请看以下示例：
假设我们有两部分回文字符串：[bards loop] 和 [pools drab]。 如果用户在左侧字段的 "d" 和 "s" 之间点击，光标应显示为： [bard|s loop] [pools| drab]
接着，如果用户在左侧字段输入五个字符 " mood"（注意第一个字符是空格），完成后，两个字段应显示为： [bard mood|s loop] [pools|doom drab]
请注意，右侧字段中并未添加空格，且新输入的字母 "mood" 被反转为 "doom" 并插入到正确的位置。
立即学习“Java免费学习笔记（深入）”；
核心挑战与解决方案分解
实现上述功能涉及多个层面的逻辑处理。我们可以将整个问题分解为以下几个可管理的小任务：
1. 界面与交互管理
首先，我们需要两个可编辑的文本输入字段。在HTML中，可以使用 或
- input 事件：当输入框的值发生变化时触发（适用于文本内容同步）。
- keyup 事件：当用户释放键盘按键时触发（可用于捕获光标移动，但 selectionchange 或 mouseup 更精确）。
- click 事件：当用户点击输入框时触发（用于捕获光标位置变化）。
- focus 事件：当输入框获得焦点时触发，用于识别当前活动的输入框。
我们需要一个机制来追踪当前哪个输入框是活跃的（即用户正在操作的）。
2. 字符识别与过滤
这是实现“字符过滤”功能的关键。我们需要一个函数来识别字符串中的字母，并过滤掉所有非字母字符（如空格、标点、数字等）。正则表达式是完成此任务的理想工具。
-
过滤函数： 可以定义一个函数，它接收一个字符串，并返回一个只包含字母的字符串。
function filterLetters(text) { return text.replace(/[^a-zA-Z]/g, ''); // 移除所有非字母字符 } -
反转函数： 由于是回文，我们还需要一个函数来反转字符串。
function reverseString(text) { return text.split('').reverse().join(''); }
3. 光标位置同步逻辑
这是整个系统中最复杂的部分。当用户在活跃字段中移动或输入时，非活跃字段的光标位置必须精确地反映活跃字段中“有效字母”的光标位置。
核心思想：
- 获取活跃字段的逻辑光标位置： 活跃字段中光标前有多少个“字母”。
- 计算非活跃字段的物理光标位置： 基于非活跃字段的长度和活跃字段的逻辑光标位置来确定。
步骤详解：
获取活跃字段的物理光标位置： 使用 inputElement.selectionStart 获取。
-
计算活跃字段中光标前的字母数量：
function getLettersBeforeCursor(text, cursorIndex) { const subText = text.substring(0, cursorIndex); const letters = filterLetters(subText); // 过滤出光标前的字母 return letters.length; // 返回字母数量 } -
计算非活跃字段的对应光标位置： 假设活跃字段光标前的字母数量为 lettersCount。 非活跃字段的内容是活跃字段过滤并反转后的纯字母字符串。 因此，非活跃字段的对应光标位置应该是 非活跃字段总长度 - lettersCount。
function setCursorPosition(inputElement, position) { inputElement.selectionStart = position; inputElement.selectionEnd = position; } // 在同步函数中调用 // ... const activeCursorPos = activeInput.selectionStart; const lettersBeforeActiveCursor = getLettersBeforeCursor(activeInput.value, activeCursorPos); const inactiveValue = inactiveInput.value; // 非活跃字段此时已是过滤反转后的纯字母 const inactiveCursorPos = inactiveValue.length - lettersBeforeActiveCursor; setCursorPosition(inactiveInput, inactiveCursorPos); // ...
4. 文本内容同步与回文生成
当活跃字段的文本内容发生变化时，非活跃字段的内容需要更新。
- 获取活跃字段的当前值。
- 对活跃字段的值进行过滤，然后反转。
- 将反转后的纯字母字符串设置为非活跃字段的值。
这确保了非活跃字段始终是活跃字段的纯字母回文。
综合实现策略与示例代码
我们将使用两个
HTML 结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双向回文输入框</title>
<style>
body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; margin-top: 50px; }
.container { display: flex; gap: 20px; }
textarea { width: 300px; height: 100px; padding: 10px; font-size: 1.1em; border: 1px solid #ccc; border-radius: 5px; }
h3 { margin-top: 30px; }
</style>
</head>
<body>
<h1>双向回文输入框</h1>
<p>在一个字段中输入，另一个字段将实时显示过滤后的反转内容，并同步光标。</p>
<div class="container">
<textarea id="inputField1" placeholder="输入左侧内容..."></textarea>
<textarea id="inputField2" placeholder="输入右侧内容..." disabled></textarea>
</div>
<h3>工作原理示例：</h3>
<pre class="brush:php;toolbar:false;">
初始: [bards loop] [pools drab]
点击左侧: [bard|s loop] [pools| drab]
左侧输入" mood": [bard mood|s loop] [pools|doom drab]
<script src="palindrome-sync.<a%20style=" color: text-decoration:underline title="js" href="https://www.php.cn/zt/15802.html" target="_blank">js"></script> 
