jQuery设置输入框RTL方向后负号显示异常，求解决方法

问题分析 #

给输入框设置direction: rtl后，所有字符会被强制按从右到左顺序渲染，输入负数（如-2）时会显示成2-——负号被挤到了末尾。这是因为RTL规则会反转整个字符序列，而负号作为LTR（从左到右）字符，未被正确识别为数字前缀。

解决方案 #

方案一：CSS纯样式修复（推荐） #

用unicode-bidi: plaintext配合direction: rtl，既能保留输入框从右到左的输入行为，又能让数字和负号遵循自然的LTR顺序排列：

#applying_credit {
  direction: rtl;
  unicode-bidi: plaintext;
}

这个属性会让输入框内的文本按其固有语言方向（数字、负号属于LTR）处理，同时整体容器维持RTL的光标位置。

方案二：JavaScript逻辑修正 #

如果CSS方案不满足需求，可通过监听输入事件手动调整负号位置：

$('#applying_credit').on('input', function() {
  const value = this.value;
  // 检查负号是否存在且不在开头
  if (value.includes('-') && value.charAt(0) !== '-') {
    // 移除所有负号并添加到开头
    const correctedValue = '-' + value.replace(/-/g, '');
    this.value = correctedValue;
    // 将光标保持在输入框末尾
    const cursorPosition = correctedValue.length;
    this.setSelectionRange(cursorPosition, cursorPosition);
  }
});

该方法会实时修正输入内容，确保负号始终位于数字前方，同时保留光标在右侧的输入体验。

补充说明 #

如果你的场景仅需要数字右对齐而非严格的RTL输入行为，也可以直接用text-align: right替代direction: rtl，这样既不会打乱负号顺序，也能实现输入时光标在右侧的效果：

#applying_credit {
  text-align: right;
}

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