文本框聚焦最大值校验及三组产品数量输入限制功能实现咨询

Hey there! Let's break down solutions for your two frontend requirements clearly:

To validate or inform users about the max limit when an input gets focus, we can listen to the focus event on all quantity inputs. This will let us check if the max attribute exists and take action (like showing a warning if the current value exceeds it).

Implementation Code: #

// Attach focus event listeners to all quantity inputs
document.querySelectorAll('.js-qty').forEach(input => {
  input.addEventListener('focus', function() {
    // Retrieve the max attribute value
    const maxLimit = this.getAttribute('max');
    
    if (maxLimit) {
      // Example: Log the max limit to console (you could show a tooltip instead)
      console.log(`Max allowed quantity: ${maxLimit}`);
      
      // Optional: Highlight input if current value already exceeds max
      const currentValue = parseInt(this.value) || 0;
      if (currentValue > parseInt(maxLimit)) {
        this.classList.add('invalid');
      }
    }
  });
});

For all three product sets, we need to enforce a hard limit of 6. If a user enters a value over 6, we'll show an error message, reset the input to 0, and refocus it. Here's how to implement this consistently across all inputs:

Step 1: Add CSS for Error States (Optional but Recommended) #

First, add some styling to make errors visible:

/* Style invalid input */
.js-qty.invalid {
  border-color: #dc3545; /* Adjust to match your design system */
}

/* Style error message */
.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 4px;
}

Step 2: JavaScript Validation Logic #

// Validate all quantity inputs on input/blur events
document.querySelectorAll('.js-qty').forEach(input => {
  const MAX_QUANTITY = 6; // Apply to all three product sets
  
  // Real-time validation as user types
  input.addEventListener('input', handleQuantityValidation);
  
  // Fallback validation when input loses focus
  input.addEventListener('blur', handleQuantityValidation);
  
  function handleQuantityValidation() {
    // Find the corresponding error message element
    const errorElement = input.closest('.qty_n').nextElementSibling;
    const inputValue = parseInt(input.value) || 0;
    
    // Reset error state first
    errorElement.textContent = '';
    input.classList.remove('invalid');
    
    // Check if value exceeds max limit
    if (inputValue > MAX_QUANTITY) {
      // Show error message
      errorElement.textContent = `Quantity cannot exceed ${MAX_QUANTITY}.`;
      // Reset input to 0
      input.value = 0;
      // Refocus the input (use setTimeout to ensure focus works after reset)
      setTimeout(() => input.focus(), 0);
      // Mark input as invalid
      input.classList.add('invalid');
    }
    // Optional: Ensure value isn't negative
    else if (inputValue < 0) {
      input.value = 0;
    }
  }
});

Key Notes: #

• The closest('.qty_n') method helps reliably find the parent container, then nextElementSibling targets the adjacent .error-message div for each input.
• Using setTimeout for focus ensures the browser processes the value reset before focusing back on the input.
• We handle both input (real-time) and blur (focus-out) events to cover all user interactions.

内容的提问来源于stack exchange，提问作者Sukhpreet Singh Alang