如何在HTML中实现输入文本反转功能？

dir="rtl"确实只能控制文本的对齐方向和阅读顺序，没法改变输入字符的追加逻辑。要实现「按1再按2显示21」的效果，得用JavaScript监听输入事件，手动调整字符顺序。

直接上可运行的代码：

HTML部分 #

<input type="text" id="reverseInput" placeholder="输入内容试试">

JavaScript部分 #

const reverseInput = document.getElementById('reverseInput');
let lastInputValue = '';

reverseInput.addEventListener('input', function(e) {
  const currentVal = e.target.value;
  // 判断是新增字符还是删除操作
  if (currentVal.length > lastInputValue.length) {
    // 提取刚输入的新字符
    const newChar = currentVal.substring(lastInputValue.length);
    // 把新字符放到现有内容的最前面
    e.target.value = newChar + lastInputValue;
  }
  // 更新记录的上一次输入值
  lastInputValue = e.target.value;
});

逻辑说明 #

• 监听输入框的input事件，每次输入变化时触发处理
• 对比当前输入值和上一次记录的值，判断用户是新增了字符还是在删除内容
• 新增字符时，把新输入的字符拼在已有内容的前面，实现输入顺序反转
• 删除操作时自动同步记录值，保证退格、删除行为正常

如果需要限制输入内容（比如只允许数字），可以在提取新字符时加个过滤：

// 只保留数字字符
const newChar = currentVal.substring(lastInputValue.length).replace(/\D/g, '');

内容的提问来源于stack exchange，提问作者Ali Raza Jafri