能否在<input type="number">标签中显示序数文本而非数字？

原生<input type="number">本身不支持直接显示文本（比如序数词），因为它的设计初衷就是用于数值输入，浏览器会强制渲染数字格式。但可以通过视觉模拟的方式，在保留number输入框原有功能（上下箭头、范围限制、数值验证）的前提下，让用户看到序数词。

思路是：用CSS隐藏输入框的数字文本，同时在输入框对应位置显示转换后的序数词；通过JavaScript监听输入框的数值变化，实时更新显示内容。

步骤1：HTML结构 #

保留原有的number输入框，包裹在容器中方便定位：

<div class="ordinal-input-wrapper">
  <input type="number" id="numbers" min="1" max="10" value="1">
</div>

步骤2：CSS样式 #

让输入框透明（保留交互性），用容器伪元素显示序数词：

.ordinal-input-wrapper {
  position: relative;
  display: inline-block;
  width: 120px; /* 匹配输入框默认宽度 */
}

#numbers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1; /* 确保输入框在最上层接收交互 */
  cursor: text;
}

.ordinal-input-wrapper::after {
  content: var(--ordinal-text);
  display: block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

步骤3：JavaScript逻辑 #

实现数字转序数词的函数，并监听输入变化更新显示：

// 数字转序数词，处理特殊情况（11th/12th/13th）
function getOrdinal(n) {
  const suffixes = ["th", "st", "nd", "rd"];
  const v = n % 100;
  return n + (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]);
}

const input = document.getElementById('numbers');
const wrapper = input.parentElement;

// 更新显示的序数词
function updateOrdinalDisplay() {
  const value = input.value;
  wrapper.style.setProperty('--ordinal-text', value ? `"${getOrdinal(parseInt(value))}"` : '""');
}

// 监听输入变化（键盘输入、上下箭头点击）
input.addEventListener('input', updateOrdinalDisplay);
input.addEventListener('change', updateOrdinalDisplay);

// 初始加载时更新显示
updateOrdinalDisplay();

• 输入框设置opacity: 0仅隐藏数字，依然能接收鼠标点击、键盘输入和上下箭头操作，完全保留number输入框的原生功能。
• 序数词转换函数已覆盖所有特殊数值场景，避免出现11st、12nd这类错误格式。
• 如需扩展数值范围，仅需调整输入框的min和max属性即可，转换函数无需修改。

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