如何用jQuery实现多输入框自动生成指定格式Meta Title？

Hey Alexander! Glad to help you expand that single-input jQuery code to handle multiple fields for your meta title. Here's a clean, robust way to make both inputs feed into the auto-generated meta title:

Step 1: First, let's assume your HTML looks something like this (adjust IDs if yours differ): #

<!-- Input 1: Vehicle Model -->
<input type="text" id="vehicleModel" placeholder="Enter model (e.g., Audi A4)">

<!-- Input 2: Category -->
<input type="text" id="vehicleCategory" placeholder="Enter category (e.g., Car)">

<!-- Input 3: Auto-generated Meta Title -->
<input type="text" id="meta_title" readonly placeholder="Meta Title will appear here">

Step 2: The jQuery Code #

Instead of binding separate handlers for each input, we'll create a reusable function to generate the meta title, then attach it to both inputs. We'll use the input event (better than keyup because it catches paste, drag-and-drop, and other text changes):

// Define the core function to build the meta title
function buildMetaTitle() {
    // Get trimmed values from both inputs to avoid extra spaces
    const model = $("#vehicleModel").val().trim();
    const category = $("#vehicleCategory").val().trim();
    
    // Build the title with fallback logic for empty fields
    let finalTitle = "";
    if (model && category) {
        finalTitle = `${model} - for sale (${category})`;
    } else if (model) {
        finalTitle = `${model} - for sale`;
    } else if (category) {
        finalTitle = `for sale (${category})`;
    }
    
    // Update the meta title input
    $("#meta_title").val(finalTitle);
}

// Attach the function to both inputs' input events
$("#vehicleModel, #vehicleCategory").on("input", buildMetaTitle);

What this does: #

• Handles all text changes: The input event triggers whenever the text in either field changes—whether from typing, pasting, or even right-clicking to paste text.
• Clean formatting: Trims whitespace from inputs so you don't get weird extra spaces in the meta title.
• Fallback logic: If one input is empty, it still generates a sensible title instead of a broken one (e.g., just "Audi A4 - for sale" if category is blank, or "for sale (Car)" if model is blank).
• Reusable code: Keeping the title-building logic in a separate function makes it easy to tweak the format later (like changing "for sale" to "on sale" without touching the event bindings).

Just swap out the IDs (#vehicleModel, #vehicleCategory) with your actual input IDs if they're different, and you're good to go!

内容的提问来源于stack exchange，提问作者Alexander S.