.ready与.click在条件调用函数时失效，文件输入框光标设置异常

Hey there, let's work through this issue together. The core problem here is that when your page reloads, the cursor focus on the file input gets reset—and your current event handlers aren't accounting for that reload state. Plus, we need to make sure the set_curso_in_files() function only runs when your MySQL condition is true, specifically after clicking the "simple" link.

Breakdown of the Problem #

1. When you click the "simple" link, if it triggers a page reload (either by default or your logic), the browser resets all DOM states—including the input focus.
2. input[type="file"] has some browser-specific behavior around focusing, so we need to make sure we're triggering it correctly in a user-initiated action (which clicking a link is, so that's good).
3. Your condition check from MySQL is asynchronous, so we need to handle that properly to avoid running the focus function before we have the condition result.

Step-by-Step Solutions #

1. Prevent Unnecessary Page Reload (If Possible)

If the "simple" link doesn't need to reload the page, stop its default behavior first. This keeps the current page state intact so the focus stays after clicking:

// Wait for the DOM to fully load before binding events
document.addEventListener('DOMContentLoaded', async function() {
  const simpleLink = document.querySelector('a[href="#simple"]'); // Adjust selector to match your link
  const fileInput = document.querySelector('input[type="file"]');

  if (!simpleLink || !fileInput) return;

  simpleLink.addEventListener('click', async function(e) {
    // Stop the link from reloading the page
    e.preventDefault();

    // Fetch your condition from MySQL (replace with your actual API call)
    const shouldFocus = await fetchConditionFromDB();

    if (shouldFocus) {
      set_curso_in_files(fileInput);
    }
  });
});

// Your focus function—make sure it targets the input correctly
function set_curso_in_files(input) {
  // For file inputs, .focus() is the standard way to set cursor focus
  input.focus();
  // If some browsers act up, add a small delay (rare, but worth trying)
  // setTimeout(() => input.focus(), 50);
}

// Mock function for fetching MySQL condition—replace with your backend call
async function fetchConditionFromDB() {
  const res = await fetch('/api/get-focus-condition');
  const data = await res.json();
  return data.condition; // Returns true/false from your DB
}

2. Handle Page Reloads (If the Link Must Trigger a Reload)

If the "simple" link needs to reload the page, we can add a URL parameter to mark that we need to re-trigger the focus after reload:

document.addEventListener('DOMContentLoaded', async function() {
  const simpleLink = document.querySelector('a[href="#simple"]');
  const fileInput = document.querySelector('input[type="file"]');

  // Handle link click: add a parameter to the URL before reloading
  if (simpleLink) {
    simpleLink.addEventListener('click', async function(e) {
      e.preventDefault();
      const shouldFocus = await fetchConditionFromDB();

      if (shouldFocus) {
        // Add a parameter to the URL to indicate we need to focus after reload
        const currentUrl = new URL(window.location.href);
        currentUrl.searchParams.set('triggerFocus', 'true');
        window.location.href = currentUrl.toString();
      } else {
        // Proceed with normal reload if condition is false
        window.location.href = simpleLink.href;
      }
    });
  }

  // Check URL parameter on page load to re-trigger focus
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get('triggerFocus') === 'true' && fileInput) {
    // Re-check the condition (optional, but ensures it's still valid after reload)
    const shouldFocus = await fetchConditionFromDB();
    if (shouldFocus) {
      set_curso_in_files(fileInput);
    }
    // Remove the parameter so it doesn't persist on subsequent reloads
    urlParams.delete('triggerFocus');
    window.history.replaceState({}, document.title, `${window.location.pathname}${urlParams.toString() ? `?${urlParams.toString()}` : ''}`);
  }
});

// Reuse the set_curso_in_files and fetchConditionFromDB functions from above

Key Checks to Verify #

• Make sure your set_curso_in_files() function is receiving the correct input[type="file"] element—console log the element to confirm it's not null.
• Browsers block automatic focus for file inputs unless it's triggered by a user interaction (like clicking a link), which your setup already uses—so that shouldn't be an issue.
• Ensure your MySQL condition API call is returning true correctly when expected—test it independently to rule out backend issues.

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