技术问题：选中textarea并模拟空格输入，实现点击图片追加alt值及手动空格

Got it, let's work through your requirements to get the exact behavior you want. The main issue with just appending a space via value += ' ' is that it doesn't trigger the native keyboard events that happen when a user actually presses a key—we need to simulate those events instead to replicate real user interaction.

Step 1: Create a Reusable Function to Simulate Space Key Press #

First, let's make a helper function that mimics a real space key press. This will dispatch both keydown and keyup events, just like a user would do when pressing and releasing a key:

function simulateSpaceKey(element) {
  // Dispatch keydown event for space
  const keydownEvent = new KeyboardEvent('keydown', {
    key: ' ',
    code: 'Space',
    keyCode: 32,
    which: 32,
    bubbles: true,
    cancelable: true
  });
  element.dispatchEvent(keydownEvent);

  // Dispatch keyup event for space (completes the key press action)
  const keyupEvent = new KeyboardEvent('keyup', {
    key: ' ',
    code: 'Space',
    keyCode: 32,
    which: 32,
    bubbles: true,
    cancelable: true
  });
  element.dispatchEvent(keyupEvent);
}

The bubbles and cancelable flags ensure the event behaves like a native keyboard event, while including keyCode and which helps maintain broader browser compatibility.

Step 2: Implement Requirement 1 (Focus Textarea & Simulate Space) #

To fulfill the first requirement, simply target the textarea, give it focus, and call our helper function. You can run this code whenever you need this action (e.g., on page load, or when a specific button is clicked):

const chatInput = document.querySelector('textarea[data-a-target="chat-input"]');
// Focus the textarea and simulate a space key press
chatInput.focus();
simulateSpaceKey(chatInput);

Step 3: Update the Click Handler for Requirement 2 #

For the image click event, we'll keep adding the alt text as you already do, then follow it up with our simulated space key press instead of appending a space directly:

const emoteList = document.querySelector('[your-emote-list-selector]'); // Replace with your actual emote list selector
const chatSend = document.querySelector('button[data-a-target="chat-send-button"]');

emoteList.addEventListener('click', function(e){
    if(e.target.nodeName === 'IMG'){
        chatInput.focus();
        // Add the image's alt text to the input
        chatInput.value += e.target.alt;
        // Simulate a space key press to add the space naturally
        simulateSpaceKey(chatInput);
    }
})

Full Working Code #

Putting it all together, here's the complete script:

// Helper function to simulate space key press
function simulateSpaceKey(element) {
  const keydownEvent = new KeyboardEvent('keydown', {
    key: ' ',
    code: 'Space',
    keyCode: 32,
    which: 32,
    bubbles: true,
    cancelable: true
  });
  element.dispatchEvent(keydownEvent);

  const keyupEvent = new KeyboardEvent('keyup', {
    key: ' ',
    code: 'Space',
    keyCode: 32,
    which: 32,
    bubbles: true,
    cancelable: true
  });
  element.dispatchEvent(keyupEvent);
}

// Target elements
const chatInput = document.querySelector('textarea[data-a-target="chat-input"]');
const chatSend = document.querySelector('button[data-a-target="chat-send-button"]');
const emoteList = document.querySelector('[your-emote-list-selector]'); // Replace with actual selector (e.g., #emote-list)

// Requirement 1: Focus textarea and simulate space (run this when needed)
chatInput.focus();
simulateSpaceKey(chatInput);

// Requirement 2: Handle image clicks
emoteList.addEventListener('click', function(e){
    if(e.target.nodeName === 'IMG'){
        chatInput.focus();
        chatInput.value += e.target.alt;
        simulateSpaceKey(chatInput);
    }
})

Note: Don't forget to replace [your-emote-list-selector] with the actual CSS selector for your emote list container (like #emote-container or .emote-list).

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