// 社会安全号码掩码
function applySSNMask(input) {
  // 移除非数字字符
  let value = input.replace(/\D/g, '');
  
  // 应用掩码格式 xxx-xx-xxxx
  if (value.length > 3) {
    value = value.substring(0, 3) + '-' + value.substring(3);
  }
  if (value.length > 6) {
    value = value.substring(0, 6) + '-' + value.substring(6, 9);
  }
  return value;
}

// 去掩码
function removeSSNMask(maskedInput) {
  return maskedInput.replace(/-/g, '');
}

import React, { useState } from 'react';

const MaskedInput = () => {
  const [ssn, setSsn] = useState('');
  
  const handleChange = (e) => {
    let value = e.target.value.replace(/\D/g, '');
    
    if (value.length > 3) {
      value = value.substring(0, 3) + '-' + value.substring(3);
    }
    if (value.length > 6) {
      value = value.substring(0, 6) + '-' + value.substring(6, 9);
    }
    
    setSsn(value);
  };
  
  return (
    <input
      type="text"
      value={ssn}
      onChange={handleChange}
      placeholder="___-__-____"
      maxLength="11"
    />
  );
};

function handleChange(e) {
  const { value, selectionStart } = e.target;
  const originalLength = value.length;
  
  // 应用掩码逻辑...
  
  // 恢复光标位置
  setTimeout(() => {
    const newLength = e.target.value.length;
    const cursorOffset = newLength - originalLength;
    e.target.setSelectionRange(
      selectionStart + cursorOffset,
      selectionStart + cursorOffset
    );
  }, 0);
}

function handlePaste(e) {
  e.preventDefault();
  const pastedData = e.clipboardData.getData('text/plain').replace(/\D/g, '');
  // 处理粘贴数据并应用掩码
  const maskedValue = applyMask(pastedData);
  // 更新输入框值
}