Initials Helper / Initialen splitsen met punt

function initialsHelper(element) {
  console.log(element);
  const initials = element ? document.getElementById(element) : document.getElementById("voorletters");
  const char = [
    "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m",
    "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
    "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
    "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
  ];
  
  // Bijhouden van de vorige waarde om backspace/delete te detecteren
  let previousValue = '';
  let isBackspacing = false;

  // Directe key event listeners voor backspace/delete detectie
  initials?.addEventListener("keydown", (e) => {
    // Detecteer backspace (8) of delete (46) toetsen
    if (e.keyCode === 8 || e.keyCode === 46) {
      isBackspacing = true;
    }
  });

  initials?.addEventListener("keyup", (e) => {
    // Reset de backspace vlag na keyup
    if (e.keyCode === 8 || e.keyCode === 46) {
      isBackspacing = false;
    }
  });

  // Helper functie om initialen juist te formatteren
  const formatInitials = () => {
    // Als gebruiker aan het backspacen is, niets doen
    if (isBackspacing) {
      return;
    }

    // Als de waarde korter is geworden, waarschijnlijk door backspace
    if (initials.value.length < previousValue.length) {
      previousValue = initials.value;
      return;
    }
    
    // Verwijder dubbele punten (..)
    let value = initials.value.replace(/\.{2,}/g, '.');
    
    // Verwijder spaties
    value = value.replace(/\s/g, '');
    
    // Zorg ervoor dat elke letter wordt gevolgd door één punt
    let formatted = '';
    for (let i = 0; i < value.length; i++) {
      if (char.includes(value[i])) {
        // Als het een letter is, voeg hoofdletter toe
        formatted += value[i].toUpperCase();
        
        // Voeg een punt toe als het volgende karakter niet al een punt is
        if (i + 1 >= value.length || value[i + 1] !== '.') {
          formatted += '.';
        }
      } else if (value[i] === '.' && formatted.length > 0 && formatted[formatted.length - 1] !== '.') {
        // Voeg punt toe als laatste karakter nog geen punt is
        formatted += '.';
      }
    }
    
    // Update de waarde alleen als het echt veranderd is
    if (formatted !== initials.value) {
      initials.value = formatted;
    }
    
    previousValue = initials.value;
  };

  // Input event handler
  const handleInput = () => {
    // Wacht een kort moment voor het formatteren
    setTimeout(formatInitials, 10);
  };

  // Gebruik input event voor normale invoer
  initials?.addEventListener("input", handleInput);
  
  // Voor oudere browsers of specifieke apparaten
  initials?.addEventListener("change", handleInput);
  
  // Bewaar initiële waarde
  if (initials) {
    previousValue = initials.value;
  }
}