如何在HTML/JS中实现文本框自动追加固定后缀"minutes"？

嘿，这个需求我之前也碰到过，给你几个实用的方案，按需选就行：

这个方法不用复杂的JS，把数字输入区和固定的"minutes"文本分开，用CSS让它们看起来像一个完整的输入框。用户只能编辑数字部分，完全不用担心误改后缀，体验还特别顺畅。

<div class="input-group">
  <input type="number" id="minutes-input" min="1" placeholder="输入数字">
  <span class="suffix">minutes</span>
</div>

<style>
.input-group {
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  align-items: center;
}

#minutes-input {
  border: none;
  padding: 8px 10px;
  outline: none;
  width: 80px;
  font-size: 16px;
}

.suffix {
  padding: 8px 10px;
  background-color: #f5f5f5;
  color: #666;
  font-size: 16px;
}
</style>

提交表单的时候，只需要把输入框的数字值和"minutes"拼接成字符串传给后端就行，比如：

const submitValue = `${document.getElementById('minutes-input').value} minutes`;

如果因为某些限制必须用单个输入框，那可以通过JS监听输入事件，自动保留"minutes"后缀，同时阻止用户修改它：

<input type="text" id="time-input" placeholder="输入数字">

<script>
const input = document.getElementById('time-input');
const fixedSuffix = ' minutes';

// 聚焦时初始化后缀
input.addEventListener('focus', () => {
  if (!input.value.endsWith(fixedSuffix)) {
    // 过滤掉非数字内容，只保留有效数字
    const numOnly = input.value.replace(/[^0-9]/g, '');
    input.value = numOnly + fixedSuffix;
  }
  // 把光标定位到数字末尾
  input.setSelectionRange(input.value.length - fixedSuffix.length, input.value.length - fixedSuffix.length);
});

// 实时维护输入内容
input.addEventListener('input', () => {
  // 先去掉已有的后缀
  const withoutSuffix = input.value.replace(fixedSuffix, '');
  // 只保留数字
  const numOnly = withoutSuffix.replace(/[^0-9]/g, '');
  // 重新拼接后缀
  input.value = numOnly + fixedSuffix;
  // 保持光标在数字末尾
  input.setSelectionRange(numOnly.length, numOnly.length);
});

// 提交前验证
document.querySelector('form')?.addEventListener('submit', (e) => {
  const numPart = input.value.replace(fixedSuffix, '');
  if (!numPart) {
    e.preventDefault();
    alert('请输入有效的分钟数哦');
  }
});
</script>

这个脚本会自动过滤非数字字符，始终保留"minutes"，而且光标会一直停在数字部分，用户没法编辑后缀。

如果是用React这类框架开发，用受控组件来处理会更清晰，状态只维护数字部分，显示和提交时再拼接后缀：

import { useState } from 'react';

export default function MinutesInput() {
  const [minutesNum, setMinutesNum] = useState('');
  const suffix = ' minutes';

  const handleInputChange = (e) => {
    // 只保留输入的数字
    const numOnly = e.target.value.replace(/[^0-9]/g, '');
    setMinutesNum(numOnly);
  };

  // 获取用于提交的完整值
  const getSubmitValue = () => {
    return minutesNum ? `${minutesNum}${suffix}` : '';
  };

  return (
    <div style={{
      display: 'inline-flex',
      border: '1px solid #ccc',
      borderRadius: '4px',
      overflow: 'hidden'
    }}>
      <input
        type="text"
        value={minutesNum}
        onChange={handleInputChange}
        placeholder="输入数字"
        style={{
          border: 'none',
          padding: '8px 10px',
          outline: 'none',
          width: '80px',
          fontSize: '16px'
        }}
      />
      <span style={{
        padding: '8px 10px',
        backgroundColor: '#f5f5f5',
        color: '#666',
        fontSize: '16px'
      }}>
        {suffix}
      </span>
    </div>
  );
}

总的来说，方案1是最省心的，没有JS的潜在问题，用户体验也最好。如果必须用单输入框，方案2也能完美解决需求~

内容的提问来源于stack exchange，提问作者Albin wärme