JavaScript：如何用通配符匹配后缀为_text的元素触发回车事件？

Hey there, let's break down what's going wrong and fix this for you!

The main issue here is that document.getElementsByName() doesn't support wildcard matching—it only looks for exact matches of the name string you pass. When you use *_text, it's literally searching for an element with the name *_text, which doesn't exist. That's why you're getting errors (probably something like "Cannot read property 'dispatchEvent' of undefined" since no element is found).

We need to find the input whose name ends with _text instead of trying to use a wildcard with getElementsByName. Here are a couple of solid approaches:

Option 1: Use a CSS Attribute Selector (Cleanest Solution) #

CSS has a built-in selector for matching attribute endings: [name$="_text"]. This lets you directly grab the right element in one line:

function os_RaiseEvent(eventname, elementNameSuffix) {
    // Target inputs where name ends with the provided suffix
    var element = document.querySelector(`input[name$="${elementNameSuffix}"]`);
    
    if (!element) {
        console.error(`Couldn't find any input with name ending in ${elementNameSuffix}`);
        return false;
    }

    var event;
    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventname, true, false);
        if (eventname === "keydown" || eventname === "keyup") {
            event.keyCode = 13;
            // Add modern key properties for better compatibility
            event.key = "Enter";
            event.code = "Enter";
        }
        element.dispatchEvent(event);
    } else if (document.createEventObject) {
        // Fallback for old IE browsers
        event = document.createEventObject();
        if (eventname === "keydown" || eventname === "keyup") {
            event.keyCode = 13;
        }
        element.fireEvent("on" + eventname, event);
    }
    return true;
}

Then call it like this:

const eventname = "keydown";
const elementSuffix = "_text";
os_RaiseEvent(eventname, elementSuffix);

Option 2: Filter Inputs Manually (Good for Older Browser Support) #

If you need to support super old browsers that don't handle template literals or querySelector well, you can loop through all inputs and check their names:

function os_RaiseEvent(eventname, elementNameSuffix) {
    var element = null;
    const inputs = document.getElementsByTagName("input");
    
    // Loop through all inputs to find the one with matching name suffix
    for (let i = 0; i < inputs.length; i++) {
        if (inputs[i].name.endsWith(elementNameSuffix)) {
            element = inputs[i];
            break;
        }
    }

    if (!element) {
        console.error(`Couldn't find any input with name ending in ${elementNameSuffix}`);
        return false;
    }

    // Rest of the event handling code stays consistent
    var event;
    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventname, true, false);
        if (eventname === "keydown" || eventname === "keyup") {
            event.keyCode = 13;
            event.key = "Enter";
            event.code = "Enter";
        }
        element.dispatchEvent(event);
    } else if (document.createEventObject) {
        event = document.createEventObject();
        if (eventname === "keydown" || eventname === "keyup") {
            event.keyCode = 13;
        }
        element.fireEvent("on" + eventname, event);
    }
    return true;
}

• Error handling: Now the function checks if it found an element and logs a clear message if not, so you don't get confusing undefined errors.
• Modern browser compatibility: Added key and code properties to the event, since keyCode is deprecated in some modern browsers.
• Clearer variable names: Renamed elementId to elementNameSuffix to better reflect what the parameter is used for.

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