HTML Attributes & contenteditable

<div contenteditable spellcheck="true">
  <!-- Spellcheck enabled -->
</div>

<div contenteditable spellcheck="false">
  <!-- Spellcheck disabled -->
</div>

// Disable spellcheck during IME composition
const editor = document.querySelector('[contenteditable]');
let isComposing = false;

editor.addEventListener('compositionstart', () => {
  isComposing = true;
  editor.setAttribute('spellcheck', 'false');
});

editor.addEventListener('compositionend', () => {
  isComposing = false;
  editor.setAttribute('spellcheck', 'true');
});

<div contenteditable lang="en" spellcheck="true">
  <!-- English content -->
</div>

<div contenteditable lang="fr" spellcheck="true">
  <!-- French content -->
</div>

<div contenteditable dir="ltr">
  <!-- Left-to-right text -->
</div>

<div contenteditable dir="rtl">
  <!-- Right-to-left text -->
</div>

// Handle dir changes during editing
const editor = document.querySelector('[contenteditable]');

function setDirection(dir) {
  // Save selection
  const selection = window.getSelection();
  const range = selection.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null;
  
  // Change direction
  editor.setAttribute('dir', dir);
  
  // Restore selection after a brief delay
  if (range) {
    requestAnimationFrame(() => {
      selection.removeAllRanges();
      selection.addRange(range);
    });
  }
}

// Implement autofocus for contenteditable
const editor = document.querySelector('[contenteditable]');

// Option 1: On page load
window.addEventListener('load', () => {
  editor.focus();
});

// Option 2: Using requestAnimationFrame (better timing)
requestAnimationFrame(() => {
  editor.focus();
});

// Option 3: Using DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
  editor.focus();
});

// Implement maxlength manually
const editor = document.querySelector('[contenteditable]');
const maxLength = 100;

editor.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'insertText' || e.inputType === 'insertCompositionText') {
    const currentLength = editor.textContent.length;
    const newText = e.data || '';
    const selection = window.getSelection();
    
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      const selectedLength = range.toString().length;
      const newLength = currentLength - selectedLength + newText.length;
      
      if (newLength > maxLength) {
        e.preventDefault();
        // Optionally show warning to user
      }
    }
  }
});

// Manual required validation
const editor = document.querySelector('[contenteditable]');
const form = editor.closest('form');

form.addEventListener('submit', (e) => {
  if (editor.textContent.trim() === '') {
    e.preventDefault();
    // Show validation error
    editor.setAttribute('aria-invalid', 'true');
  }
});

// Manual pattern validation
const editor = document.querySelector('[contenteditable]');
const pattern = /^[0-9]+$/; // Numbers only

editor.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'insertText' || e.inputType === 'insertCompositionText') {
    const newText = e.data || '';
    const currentText = editor.textContent;
    const selection = window.getSelection();
    
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      const selectedText = range.toString();
      const newContent = currentText.slice(0, range.startOffset) + 
                        newText + 
                        currentText.slice(range.endOffset);
      
      if (!pattern.test(newContent)) {
        e.preventDefault();
      }
    }
  }
});

// Implement readonly manually
const editor = document.querySelector('[contenteditable]');
let isReadonly = false;

editor.addEventListener('beforeinput', (e) => {
  if (isReadonly) {
    e.preventDefault();
  }
});

// Also prevent paste, drag-drop, etc.
editor.addEventListener('paste', (e) => {
  if (isReadonly) {
    e.preventDefault();
  }
});

editor.addEventListener('drop', (e) => {
  if (isReadonly) {
    e.preventDefault();
  }
});

// Manual disabled implementation
const editor = document.querySelector('[contenteditable]');
let isDisabled = false;

function setDisabled(disabled) {
  isDisabled = disabled;
  editor.setAttribute('contenteditable', disabled ? 'false' : 'true');
  editor.setAttribute('aria-disabled', disabled ? 'true' : 'false');
  editor.style.opacity = disabled ? '0.6' : '1';
  editor.style.pointerEvents = disabled ? 'none' : 'auto';
}

editor.addEventListener('beforeinput', (e) => {
  if (isDisabled) {
    e.preventDefault();
  }
});

// CSS-based placeholder implementation
[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: #999;
  pointer-events: none;
}

// JavaScript to handle focus behavior
const editor = document.querySelector('[contenteditable]');
editor.addEventListener('focus', () => {
  if (editor.textContent.trim() === '') {
    // Placeholder should remain visible
    // But Safari may hide it - need workaround
  }
});

editor.addEventListener('blur', () => {
  if (editor.textContent.trim() === '') {
    // Show placeholder again
  }
});

<div contenteditable inputmode="numeric">
  <!-- Should show numeric keyboard, but doesn't work on iOS -->
</div>

<div contenteditable inputmode="email">
  <!-- Should show email keyboard, but doesn't work on iOS -->
</div>

<div contenteditable autocapitalize="sentences">
  <!-- Should capitalize first letter of sentences -->
</div>

<div contenteditable autocapitalize="words">
  <!-- Should capitalize first letter of words -->
</div>

<div contenteditable autocapitalize="none">
  <!-- Should not capitalize -->
</div>

<div contenteditable autocorrect="on">
  <!-- Should enable autocorrect -->
</div>

<div contenteditable autocorrect="off">
  <!-- Should disable autocorrect -->
</div>

<div contenteditable enterkeyhint="send">
  <!-- Should show "Send" on Enter key, but doesn't work on Android -->
</div>

<div contenteditable enterkeyhint="search">
  <!-- Should show "Search" on Enter key, but doesn't work on Android -->
</div>