Angular4中粘贴文本清除空格无效问题求助（IE浏览器不兼容）

Hey there! Let's get your paste-to-remove-spaces function working in Internet Explorer. IE has always had its own quirks with clipboard handling and event behavior, so let's break down the issues in your original code and fix them step by step.

What's Wrong with the Original Code? #

Your function works in Chrome/Firefox because:

1. Those browsers use event.clipboardData to access clipboard content during a paste event.
2. The setTimeout hack works around the default paste behavior by overwriting the value after the browser has pasted the original text.

But IE breaks this because:

• It stores clipboard data in window.clipboardData (not the event object).
• The setTimeout delay might not reliably overwrite the default pasted content (IE sometimes prioritizes its own default behavior).
• IE expects a different parameter for getData() ('Text' instead of 'text/plain').

Fixed Version of the noSpace Function #

Here's the revised function that works across Chrome, Firefox, and IE:

function noSpace(event: any, docId: string) {
    // Stop the browser's default paste behavior first
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        // IE-specific way to block default actions
        event.returnValue = false;
    }

    let clipBoardStr: string;
    // Handle clipboard data access across browsers
    if (event.clipboardData) {
        clipBoardStr = event.clipboardData.getData('text/plain');
    } else if (window.clipboardData) {
        clipBoardStr = window.clipboardData.getData('Text');
    } else {
        clipBoardStr = ''; // Fallback if clipboard access fails
    }

    // Remove all spaces from the clipboard content
    const cleanedText = clipBoardStr.replace(/ /g, '');
    
    // Update the input field directly (no need for setTimeout now)
    const inputElement = document.getElementById(docId) as HTMLInputElement;
    if (inputElement) {
        inputElement.value = cleanedText;
    }
}

Key Changes Explained #

1. Block Default Paste Behavior
   We stop the browser from pasting the original text immediately, so we don't have to fight with overwriting it later. We use both standard preventDefault() and IE's returnValue = false to cover all cases.

2. Cross-Browser Clipboard Access
   We check if event.clipboardData exists (modern browsers) first, then fall back to window.clipboardData for IE. We also use 'Text' as the parameter for IE's getData() method.

3. Remove setTimeout
   Since we've blocked the default paste, we can set the cleaned text directly without waiting. This avoids race conditions that happen in IE.

Bonus: Event Binding for Older IE Versions #

If you're binding the paste event via JavaScript (not inline onpaste), make sure to handle IE's old attachEvent method:

const inputField = document.getElementById(docId);
if (inputField.addEventListener) {
    inputField.addEventListener('paste', (e) => noSpace(e, docId));
} else if (inputField.attachEvent) {
    // For IE 8 and below
    inputField.attachEvent('onpaste', () => noSpace(window.event, docId));
}

This should get your function working smoothly in IE, along with modern browsers. Test it out in IE 11 (the last supported IE version) to confirm!

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