如何在React JS Material UI TextField中实现URL自动补全掩码功能

核心需求实现方案 #

下面是基于React和Material UI TextField的完整实现，满足必须输入http/https前缀、自动补全://、实时校验的需求：

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';

const UrlInput = () => {
  const [url, setUrl] = useState('');

  const handleUrlChange = (e) => {
    let value = e.target.value.trim();
    const validPrefixRegex = /^(https?:\/\/)/;
    const hasValidPrefix = validPrefixRegex.test(value);

    // 已有合法前缀，直接保留输入内容
    if (hasValidPrefix) {
      setUrl(value);
      return;
    }

    // 处理前缀输入逻辑
    switch(value) {
      case 'http':
        setUrl('http://');
        break;
      case 'https':
        setUrl('https://');
        break;
      case 'http:':
        setUrl('http://');
        break;
      case 'https:':
        setUrl('https://');
        break;
      default:
        // 处理前缀后直接跟内容的情况（如httpexample.com → http://example.com）
        if (value.startsWith('http') && !value.startsWith('http://')) {
          setUrl(`http://${value.slice(4)}`);
        } else if (value.startsWith('https') && !value.startsWith('https://')) {
          setUrl(`https://${value.slice(5)}`);
        } else {
          setUrl(value);
        }
    }
  };

  // 实时校验URL格式
  const isUrlValid = /^(https?:\/\/).+/.test(url);

  // 失去焦点时自动补全前缀（可选）
  const handleBlur = () => {
    if (url.length > 0 && !isUrlValid && !url.startsWith('http')) {
      setUrl(`http://${url}`);
    }
  };

  return (
    <TextField
      label="URL 地址"
      value={url}
      onChange={handleUrlChange}
      onBlur={handleBlur}
      error={url.length > 0 && !isUrlValid}
      helperText={url.length > 0 && !isUrlValid ? '请输入以 http:// 或 https:// 开头的完整URL' : ''}
      variant="outlined"
      fullWidth
      autoComplete="off"
    />
  );
};

export default UrlInput;

功能说明 #

• 自动补全前缀：用户输入http/https或http:/https:时，自动转换为http:///https://
• 前缀容错处理：如果用户直接输入httpexample.com，会自动补全为http://example.com；输入httpsabc.com则转为https://abc.com
• 实时格式校验：输入内容非空但不符合要求时，显示错误提示文本
• 可选的失焦补全：用户只输入域名（如example.com）时，失去焦点会自动添加http://前缀

自定义调整点 #

• 如果需要强制用户必须手动输入http/https前缀，可移除handleBlur中的自动补全逻辑，仅保留错误提示
• 可修改正则表达式，对URL的域名、路径部分添加更严格的校验规则

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