Got it, here's a robust solution that covers all your scenarios—whether the four line breaks are typed manually, pasted in, or created by deleting content. It’ll reliably trigger your desired JavaScript event whenever that condition is met:

Step-by-Step Implementation #

1. Target Your Textarea: Grab the textarea element you want to monitor.
2. Define Your Trigger Function: This is the code you want to run when four consecutive line breaks are detected.
3. Check for Line Breaks: Use a regex to detect both Unix-style (\n) and Windows-style (\r\n) line breaks (since different systems use different line endings).
4. Listen for Content Changes: Use the input event—it’s the most comprehensive event for catching any content change, including typing, pasting, cutting, or deleting text.

Full Code Example #

// Get your textarea element (replace with your actual ID/selector)
const targetTextarea = document.getElementById('my-textarea');

// Define the function you want to trigger
function onFourLineBreaksDetected() {
  console.log("Four consecutive line breaks found! Executing target action...");
  // Add your custom logic here: show a modal, send data, update UI, etc.
}

// Helper function to check for four consecutive line breaks
function hasFourLineBreaks(text) {
  // Matches either 4 Unix line breaks or 4 Windows line breaks
  return /(\n{4})|(\r\n){4}/.test(text);
}

// Add input event listener to monitor all content changes
targetTextarea.addEventListener('input', function() {
  const currentContent = this.value;
  if (hasFourLineBreaks(currentContent)) {
    onFourLineBreaksDetected();
    // Optional: If you want to prevent repeated triggers while the condition persists,
    // you could add a flag here to skip checks until the content changes again
  }
});

Optional: Add Debouncing (Avoid Frequent Triggers) #

If you’re worried about the event firing multiple times (e.g., if the user holds down the Enter key), add a debounce function to limit how often your trigger runs:

// Debounce utility to delay execution until after user stops typing/changing content
function debounce(func, delay = 200) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Use the debounced version of the listener
targetTextarea.addEventListener('input', debounce(function() {
  const currentContent = this.value;
  if (hasFourLineBreaks(currentContent)) {
    onFourLineBreaksDetected();
  }
}));

Key Notes #

• The input event works across all modern browsers and covers every way the textarea content can change—way more reliable than keyup or keydown alone.
• The regex handles both common line break formats, so your code works regardless of where the text comes from (Windows, macOS, Linux).
• If you need to reset the trigger once the four line breaks are removed, you can add an else clause to handle that scenario too.

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