如何实现始终以https://开头的表单输入框？

以下是几种可行的实现方案，可根据你的交互需求选择：

方案一：拆分固定前缀与输入区域 #

将https://设为不可编辑的固定前缀，用户仅需输入域名部分，自动拼接成完整链接，完全避免前缀被删除的问题：

// 新增状态存储去除前缀的输入内容
const [logoLinkWithoutPrefix, setLogoLinkWithoutPrefix] = useState('');

// 渲染部分
<div style={{ display: 'flex', alignItems: 'center', border: '1px solid #ccc', borderRadius: '4px', padding: '0 8px' }}>
  <span style={{ color: '#666' }}>https://</span>
  <input
    type="text"
    value={logoLinkWithoutPrefix}
    placeholder="yourwebsitehere.com"
    onChange={(event) => {
      const inputValue = event.target.value;
      setLogoLinkWithoutPrefix(inputValue);
      // 自动拼接前缀到实际存储的logoLink
      setLogoLink(`https://${inputValue}`);
    }}
    style={{ border: 'none', outline: 'none', flex: 1, padding: '8px 0' }}
  />
</div>
<Button type="submit">Save</Button>

这种方案交互直观，用户无需关注前缀，只需输入核心域名即可。

方案二：单输入框强制保留前缀 #

在单个输入框内通过逻辑控制，阻止用户删除https://，并自动补全前缀：

const handleLinkChange = (event) => {
  let inputValue = event.target.value;
  // 确保输入值始终以https://开头
  if (!inputValue.startsWith('https://')) {
    // 移除可能存在的http前缀，统一替换为https
    inputValue = `https://${inputValue.replace(/^https?:\/\//, '')}`;
  }
  setLogoLink(inputValue);
};

// 渲染部分
<input
  type="text"
  value={logoLink}
  placeholder="https://yourwebsitehere.com"
  onChange={handleLinkChange}
  onKeyDown={(e) => {
    // 禁止删除https://部分的字符（https://共8个字符）
    if (logoLink.startsWith('https://') && e.key === 'Backspace' && e.target.selectionStart <= 8) {
      e.preventDefault();
    }
  }}
/>
<Button type="submit">Save</Button>

该方案保持了单个输入框的样式，同时通过逻辑确保前缀不会被删除，用户输入google.com时会自动转为https://google.com。

方案三：提交时统一格式化（兜底处理） #

如果不需要限制用户输入过程，仅需保证最终存储的链接有效，可在提交时统一补全前缀：

const handleSubmit = (e) => {
  e.preventDefault();
  let formattedLink = logoLink;
  // 补全https前缀（如果没有http/https开头）
  if (!formattedLink.startsWith('http://') && !formattedLink.startsWith('https://')) {
    formattedLink = `https://${formattedLink}`;
  }
  // 执行你的保存逻辑
  // saveFormData({ logoLink: formattedLink });
};

// 渲染部分
<form onSubmit={handleSubmit}>
  <input
    type="text"
    value={logoLink}
    placeholder="https://yourwebsitehere.com"
    onChange={(event) => setLogoLink(event.target.value)}
  />
  <Button type="submit">Save</Button>
</form>

这种方案不干预用户输入体验，仅在提交阶段做格式修正，适合对输入灵活性要求较高的场景。

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