如何实现输入框开头仅输数字，末尾静态文本不可选中且不限总字符数？

方案一：CSS视觉模拟（非逻辑方式） #

这种方式无需修改输入框的实际值，通过容器布局让"min"看起来像是嵌入在输入框内，完全不需要JavaScript逻辑：

• 用容器包裹输入框，容器模拟输入框的边框样式
• 在容器内添加不可选中的"min"文本，定位到右侧
• 给输入框设置右侧内边距，避免输入的数字覆盖"min"

代码示例：

<div class="input-wrapper">
  <input type="text" id="time" value="0" placeholder="0" />
  <span class="static-suffix">min</span>
</div>

.input-wrapper {
  position: relative;
  display: inline-block;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding-right: 38px; /* 为"min"预留空间 */
  background-color: #fff;
}

#time {
  border: none;
  outline: none;
  padding: 8px 12px;
  width: 70px;
  font-size: 16px;
}

.static-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  user-select: none; /* 禁止选中后缀 */
  pointer-events: none; /* 后缀不响应鼠标事件 */
}

该方案的优势是输入框实际值仅包含数字，后续业务处理更简洁，同时完全符合"min不可被选中"的要求。

方案二：JavaScript控制输入框值（真实嵌入后缀） #

如果必须让"min"存在于输入框的value属性中，可以通过JS限制编辑行为，确保后缀始终保留且不可修改：

• 监听输入事件，自动过滤非数字内容并限制为1-2位
• 控制光标位置，禁止进入"min"区域
• 确保后缀始终在输入框末尾

代码示例：

<input type="text" id="time" value="0 min" />

const input = document.getElementById('time');
const fixedSuffix = ' min';

// 初始化确保后缀存在
if (!input.value.endsWith(fixedSuffix)) {
  input.value = (input.value.trim() || '0') + fixedSuffix;
}

// 限制光标只能在数字区域移动
input.addEventListener('keydown', (e) => {
  const suffixStartIndex = input.value.length - fixedSuffix.length;
  if (input.selectionStart >= suffixStartIndex) {
    // 仅允许左箭头回到数字区域，其他操作阻止
    if (!(e.key === 'ArrowLeft' && input.selectionStart === suffixStartIndex)) {
      e.preventDefault();
    }
  }
});

// 处理输入内容，维护后缀和数字规则
input.addEventListener('input', () => {
  // 剥离后缀，处理数字部分
  let numPart = input.value.replace(fixedSuffix, '').trim();
  numPart = numPart.replace(/\D/g, '').slice(0, 2); // 只保留1-2位数字
  // 重新拼接内容
  input.value = (numPart || '0') + fixedSuffix;
  // 将光标定位到数字末尾
  input.setSelectionRange(numPart.length, numPart.length);
});

// 聚焦时自动选中数字部分
input.addEventListener('focus', () => {
  const suffixStartIndex = input.value.length - fixedSuffix.length;
  input.setSelectionRange(0, suffixStartIndex);
});

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