如何在input输入框末尾固定文本？React+Chakra UI技术实现

完全可以实现该需求，核心思路是通过容器包裹输入框与后缀文本，配合定位规则让文本固定在输入框内侧末尾，不会跟随输入内容位移。

基础实现代码 #

<!-- 欧元输入组 -->
<div class="input-suffix-group" style="position: relative; display: inline-flex; align-items: center; border: 1px solid #ccc; border-radius: 4px;">
  <input 
    type="number"
    placeholder="请输入欧元金额"
    style="border: none; outline: none; padding: 8px 12px; padding-right: 50px; /* 预留后缀空间 */"
  >
  <span class="suffix" style="position: absolute; right: 12px; pointer-events: none; color: #666;">EUR</span>
</div>

<!-- 美元输出组 -->
<div class="input-suffix-group" style="position: relative; display: inline-flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; margin-left: 16px;">
  <input 
    type="number"
    readonly
    placeholder="换算后美元金额"
    style="border: none; outline: none; padding: 8px 12px; padding-right: 55px;"
  >
  <span class="suffix" style="position: absolute; right: 12px; pointer-events: none; color: #666;">USD</span>
</div>

核心规则说明 #

• 外层容器设置position: relative，作为后缀文本的定位锚点，输入框的边框、圆角样式可以直接写在容器上，还原原生输入框视觉效果
• 输入框设置右侧内边距padding-right，数值需大于后缀文本的总宽度，避免用户输入的内容被后缀文本遮挡
• 后缀文本设置position: absolute固定在容器右侧，同时添加pointer-events: none属性，避免后缀挡住输入框的点击、聚焦等交互操作

如果使用Chakra UI开发，其内置的InputGroup+InputRightElement组件渲染后的DOM结构和上述逻辑完全一致，你可以直接使用组件封装能力，不需要手动调整HTML结构。

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