如何实现获取网页所有input并在输入框点击/获焦时执行打印操作

Hey there! Let's get this sorted for you. You need to target every <input> element on a webpage and trigger a print action whenever someone clicks it or it gains focus—here's a straightforward, framework-free solution using vanilla JavaScript:

Basic Implementation #

First, we'll fetch all input elements, then attach event listeners for both click and focus events to fire the browser's print dialog.

// Grab all <input> elements across the page
const allInputs = document.querySelectorAll('input');

// Define the print function we want to execute
function triggerPrint() {
  window.print(); // Launches the browser's native print dialog
}

// Loop through each input and bind the events
allInputs.forEach(input => {
  // Trigger print when the input is clicked
  input.addEventListener('click', triggerPrint);
  // Trigger print when the input receives focus (e.g., via tab key)
  input.addEventListener('focus', triggerPrint);
});

Key Details to Know #

• Target Specific Inputs: If you don't want to target all inputs (like checkboxes or radio buttons), modify the selector to narrow it down. For example, use document.querySelectorAll('input[type="text"]') to only target text fields.
• Browser Compatibility: window.print() is supported by all modern browsers, so this will work reliably across Chrome, Firefox, Safari, and Edge.
• Cover All Interaction Types: We're using both click and focus events to make sure the print triggers whether the user clicks the input with a mouse or navigates to it via keyboard.

Optional: Prevent Duplicate Print Triggers #

If you want to avoid the print dialog popping up multiple times if the user clicks/focuses rapidly, add a simple guard clause to block duplicate calls:

let printInProgress = false;

function debouncedTriggerPrint() {
  if (!printInProgress) {
    printInProgress = true;
    window.print();
    // Reset the flag after a short delay to account for the dialog closing
    setTimeout(() => {
      printInProgress = false;
    }, 1200);
  }
}

allInputs.forEach(input => {
  input.addEventListener('click', debouncedTriggerPrint);
  input.addEventListener('focus', debouncedTriggerPrint);
});

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