多语言任务管理系统中Text Cursor Indicator随系统语言切换方向的问题

要实现根据系统当前选中语言自动切换文本光标起始方向（LTR/RTL），可以通过JavaScript动态检测语言+实时监听输入状态的方式实现，替代静态设置dir="rtl"的临时方案，具体步骤如下：

1. 初始加载时根据系统语言设置方向 #

页面加载时，通过浏览器API获取系统首选语言，自动设置页面或输入元素的文本方向：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取系统首选语言（支持多语言列表，取第一个匹配项）
  const userLang = navigator.languages ? navigator.languages[0] : navigator.language;
  // 判断是否为希伯来语（语言代码为he或he-IL）
  const isHebrew = userLang.startsWith('he');
  
  // 给根元素设置对应方向，或者仅针对输入框设置
  document.documentElement.dir = isHebrew ? 'rtl' : 'ltr';
  
  // 如果只需要针对特定输入框，比如任务输入框：
  // const taskInput = document.getElementById('task-input');
  // taskInput.dir = isHebrew ? 'rtl' : 'ltr';
});

2. 实时监听输入法切换，动态调整方向 #

如果用户手动切换输入法语言（比如从希伯来语切到英语），需要监听输入事件，根据输入的字符自动调整光标方向：

// 针对输入框绑定事件
const taskInput = document.getElementById('task-input');

// 监听输入事件，判断输入字符的语言类型
taskInput.addEventListener('input', function(e) {
  const inputValue = e.target.value;
  // 正则匹配希伯来语字符（Unicode范围U+0590至U+05FF）
  const hasHebrewChars = /[\u0590-\u05FF]/.test(inputValue);
  
  // 根据是否包含希伯来语字符设置方向
  e.target.dir = hasHebrewChars ? 'rtl' : 'ltr';
  
  // 可选：如果需要光标自动定位到正确的起始位置
  if (hasHebrewChars) {
    e.target.setSelectionRange(0, 0); // RTL时光标在右侧起始位
  } else {
    e.target.setSelectionRange(inputValue.length, inputValue.length); // LTR时光标在左侧末尾
  }
});

3. 辅助CSS优化体验 #

可以通过CSS进一步优化文本方向的渲染效果，避免布局错乱：

/* 针对输入框的基础样式 */
.task-input {
  text-align: start; /* 自动跟随dir属性调整对齐方式 */
  unicode-bidi: plaintext; /* 保持文本的自然方向，避免强制反转 */
}

关键说明 #

• 静态设置dir="rtl"会强制所有内容按RTL渲染，无法适配语言切换，而动态方案可以根据系统语言或输入内容实时调整。
• navigator.language获取的是系统当前的首选语言，navigator.languages则返回用户的语言偏好列表，优先使用后者更准确。
• 通过正则匹配字符Unicode范围，可以精准判断输入内容的语言方向，适配用户手动切换输入法的场景。

内容的提问来源于stack exchange，提问作者EY_AQ_IK