Jquery实现textarea输入@+单个字母触发事件的问题排查

Hey Jean, I’ve run into this exact issue before when building mention components—let’s get that trigger working exactly how you want it: only firing once when the user types @ followed by their first letter, not every time they keep typing after that.

Core Idea #

We need to precisely detect the moment the user finishes typing @ + the first character, rather than reacting to any occurrence of @ in the text. This means checking the text immediately before the cursor to see if it matches our trigger pattern, and adding a flag to prevent repeated triggers while the user continues typing the username.

Solution Code (Vanilla JS Example) #

Here’s a straightforward implementation you can adapt to your framework (React/Vue/etc.):

const contentTextarea = document.getElementById('your-textarea-id');
let mentionTriggered = false; // Prevents duplicate triggers while typing

contentTextarea.addEventListener('input', (e) => {
  const cursorPosition = contentTextarea.selectionStart;
  const textBeforeCursor = contentTextarea.value.slice(0, cursorPosition);

  // Regex to match: @ followed by 1 letter, with no valid username character before @
  // Covers cases like "Hello @j" or "@j" (start of text)
  const triggerRegex = /(^|[^a-zA-Z0-9_])@[a-zA-Z]$/u;

  if (triggerRegex.test(textBeforeCursor) && !mentionTriggered) {
    // Replace this with your existing user search bar logic
    console.log("Triggering user search bar!");
    mentionTriggered = true;
  } else if (!triggerRegex.test(textBeforeCursor)) {
    // Reset flag if user deletes the letter or moves away from the trigger position
    mentionTriggered = false;
  }
});

Breakdown of the Logic #

1. Cursor Position Check: We look at the text right before the cursor to make sure we’re only reacting to the most recent input, not old @ mentions elsewhere in the text.
2. Regex Pattern:
   • (^|[^a-zA-Z0-9_]): Ensures the @ is either at the start of the text or preceded by a non-username character (like a space, punctuation, etc.)—this avoids triggering on existing usernames like @john_doe.
   • @[a-zA-Z]$: Matches exactly @ followed by one letter at the end of the pre-cursor text.
3. Trigger Flag: mentionTriggered stops the event from firing repeatedly as the user types more letters after the initial trigger. We reset it if the user modifies the text to no longer match the trigger pattern (e.g., deleting the first letter after @).

Framework Adaptation Tips #

• React: Use a useRef to access the textarea DOM element, and handle the onInput event similarly.
• Vue: Bind the input event to a method, and use $refs to get the textarea’s cursor position.
• Unicode Support: If you need to support non-Latin characters (like中文, 日本語), update the regex to use [\p{L}] instead of [a-zA-Z] (keep the u flag for Unicode support).

This should give you the exact one-time trigger behavior you need for your mention component!

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