如何在HTML输入框中显示带下标的化学公式？

原生<input>或<textarea>仅支持纯文本展示，无法直接渲染HTML格式的下标元素，因此需要通过可视化容器+隐藏真实输入框的组合方案实现需求，核心逻辑是用可编辑元素展示带格式内容，同时同步真实输入框的值用于表单提交：

具体实现步骤 #

• 1. 隐藏原生的自动补全输入框（可以用display: none或者绝对定位移出可视区域）
• 2. 创建一个contenteditable="true"的div容器，模拟原生输入框的外观（添加边框、内边距等样式），专门用来展示带下标格式的化学公式
• 3. 给这个模拟输入框绑定自动补全逻辑，当下拉选项被选中时，将带<sub>标签的HTML内容插入到模拟输入框中
• 4. 同步模拟输入框的内容到隐藏的真实输入框：可以把带格式的内容转成纯文本标识（比如将H<sub>2</sub>O对应的值存为H2O），确保表单提交时能获取到正确的业务值

示例代码片段 #

<!-- 隐藏的真实输入框，用于表单提交 -->
<input type="text" id="realChemicalInput" style="display: none;">

<!-- 模拟的可视化输入框 -->
<div id="visualChemicalInput" contenteditable="true" style="border:1px solid #ccc; padding:8px; min-height:24px; border-radius:4px;"></div>

<script>
// 预设的化学公式选项，text为带格式的HTML，value为纯文本业务值
const chemicalOptions = [
  {text: 'H<sub>2</sub>O', value: 'H2O'},
  {text: 'CO<sub>2</sub>', value: 'CO2'},
  {text: 'NaCl', value: 'NaCl'}
];

// 选中下拉选项后的处理函数
function selectChemicalOption(option) {
  // 往模拟输入框插入带格式的HTML
  document.getElementById('visualChemicalInput').innerHTML = option.text;
  // 同步值到真实输入框，保证表单能正常提交
  document.getElementById('realChemicalInput').value = option.value;
}
</script>

额外注意事项 #

• 给模拟输入框做样式适配，确保和原生输入框外观一致，避免用户感知差异
• 处理光标定位、键盘输入等交互细节：比如用户手动输入数字时，可以监听输入事件自动将数字转换为下标格式
• 如果使用第三方自动补全库（如jQuery UI Autocomplete），可修改其select事件的回调函数，直接将带格式的HTML插入到模拟输入框中

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