如何实现TextInput的从右到左输入及光标左移效果？

一、用CSS原生属性直接实现从右向左输入 #

给输入框添加direction: rtl;属性，就能让输入的文本自动从右向左排列，新输入的字符会出现在已有内容的左侧，光标也会保持在左侧位置，同时搭配你已经设置的右对齐样式即可：

.rtl-input {
  text-align: right;
  direction: rtl;
}

<input type="text" class="rtl-input" placeholder="输入试试效果">

这个方案适合需要完全模拟RTL（从右到左）语言输入逻辑的场景，无需额外脚本。

二、用JavaScript手动控制光标位置（保留LTR文本方向） #

如果不想改变整体文本方向，只想实现输入时光标自动左移的效果，可以监听输入事件，手动调整光标位置：

const input = document.querySelector('.cursor-left-input');

input.addEventListener('input', function() {
  // 每次输入后，将光标定位到内容最左侧
  this.setSelectionRange(0, 0);
});

<input type="text" class="cursor-left-input" style="text-align: right;" placeholder="输入试试效果">

这种方式下，文本本身还是默认从左向右添加，但输入后光标会立刻跳回左侧，视觉上接近你要的效果，适合不需要完全反转文本方向的特殊场景。

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