解决禁用状态下input追加内容时文本回退至起始位的问题

问题场景 #

向disabled状态的<input>元素通过JavaScript追加内容时，文本会自动回退到起始位置；但手动输入（非禁用状态下）时，内容会正常向右延伸。需要实现：

• 禁用状态下追加内容时，文本不回退至起始位置
• 内容始终保持向右延伸的跟随效果

原因分析 #

disabled状态的input无法获得焦点，浏览器不会自动维护其光标位置和内容滚动状态，直接修改value时，浏览器默认会将文本滚动到起始位置，加上text-align: right的样式，视觉上就会出现内容回退的问题。

解决方案 #

方案一：使用readonly替代disabled（推荐） #

readonly属性仅禁止用户手动编辑input内容，但允许通过JavaScript修改值，且浏览器会自动维护内容的滚动和对齐状态，完全符合需求。

修改HTML代码：

<input type="text" class="calc-previous-display" value="0" readonly />
<input type="text" class="calc-display" value="0" readonly />

原有JavaScript函数无需修改：

function insertValue(el, val) {
  el.value += val;
}

如果需要保持禁用状态的视觉样式，可通过CSS补充：

input[readonly] {
  cursor: not-allowed;
  opacity: 0.7; /* 模拟禁用的半透明效果 */
  /* 可根据原有禁用样式调整 */
}

方案二：保留disabled，手动控制滚动与光标位置（兼容性略差） #

若必须保留disabled属性，可在修改值后手动将内容滚动到最右侧：

修改JavaScript函数：

function insertValue(el, val) {
  el.value += val;
  // 将光标定位到内容末尾，触发滚动
  try {
    el.setSelectionRange(el.value.length, el.value.length);
  } catch (e) {
    // 部分浏览器对disabled元素不支持setSelectionRange，降级处理
    el.scrollLeft = el.scrollWidth;
  }
}

注意：部分浏览器中disabled元素无法调用setSelectionRange，因此需要做降级处理。

内容的提问来源于stack exchange，提问作者Davide Di Francesco