文本输入标签能否接收并显示上标？参考谷歌计算器指数效果

当然可以做到！不过普通的 <input type="text"> 是纯文本输入控件，没法直接渲染富文本格式的上标，所以我们需要换个思路，这里提供两种实用的方案：

方案一：用 contenteditable 元素模拟输入框 #

这种方式是用可编辑的 HTML 元素（比如 <div>）来替代原生文本输入框，它支持直接插入富文本内容，我们可以监听输入事件，把特定标记（比如 ^ 符号）后面的内容自动转换成上标格式。

举个实际的代码例子：

<div id="mathInput" contenteditable="true" style="border:1px solid #ccc; padding:8px; width:300px; min-height:24px;"></div>

<script>
const inputEl = document.getElementById('mathInput');

inputEl.addEventListener('input', function() {
  let content = this.innerHTML;
  // 匹配 ^ 后面跟着数字/字母的内容，替换成上标标签
  content = content.replace(/\^([0-9a-zA-Z]+)/g, '<sup>$1</sup>');
  
  // 记录光标位置，避免替换内容后光标跳走
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const cursorPos = range.startOffset;
  
  this.innerHTML = content;
  
  // 恢复光标位置
  setTimeout(() => {
    const newRange = document.createRange();
    const newSelection = window.getSelection();
    const targetNode = this.childNodes[0] || this;
    newRange.setStart(targetNode, Math.min(cursorPos, targetNode.length));
    newRange.collapse(true);
    newSelection.removeAllRanges();
    newSelection.addRange(newRange);
  }, 0);
});
</script>

这个方案的好处是用户输入时能实时看到上标效果，而且操作体验和原生输入框很接近。

方案二：分离输入存储与格式化显示 #

如果需要保留原始的输入文本（比如后续要做计算逻辑），可以用一个隐藏的原生输入框存储原始值，同时用另一个元素实时显示格式化后的上标效果。

代码示例：

<!-- 隐藏的输入框，用来存储原始输入内容 -->
<input type="text" id="rawInput" style="display:none;">
<!-- 用来显示格式化内容的模拟输入框 -->
<div id="formattedInput" style="border:1px solid #ccc; padding:8px; width:300px; min-height:24px;" tabindex="0"></div>

<script>
const rawInput = document.getElementById('rawInput');
const formattedInput = document.getElementById('formattedInput');

// 点击模拟输入框时，让隐藏的原生输入框获得焦点
formattedInput.addEventListener('click', () => rawInput.focus());

// 监听原生输入框的输入，同步格式化内容到显示元素
rawInput.addEventListener('input', () => {
  const rawValue = rawInput.value;
  // 把 ^ 后面的内容转换为上标
  const formattedValue = rawValue.replace(/\^([0-9a-zA-Z]+)/g, '<sup>$1</sup>');
  formattedInput.innerHTML = formattedValue || '请输入表达式...';
});

// 同步键盘事件，确保退格、方向键等操作正常工作
formattedInput.addEventListener('keydown', (e) => {
  rawInput.focus();
  const keyEvent = new KeyboardEvent('keydown', {
    key: e.key,
    code: e.code,
    bubbles: true
  });
  rawInput.dispatchEvent(keyEvent);
});
</script>

这种方式的优势是可以同时保留原始输入值和格式化后的显示效果，适合需要对输入内容进行后续处理的场景。

额外优化建议 #

• 如果需要支持更复杂的数学公式（比如分数、根号），可以考虑使用 MathJax 或 KaTeX 这类专业的数学公式渲染库，它们能处理更复杂的格式转换。
• 可以添加更多的输入规则，比如支持手动选中内容后点击按钮转换为上标，提升用户操作灵活性。

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