关于在ePub中实现The Church App同款输入框功能的技术咨询

Great question! Let's break down what's possible and key considerations for replicating your Church App's functionality and styling in an ePub:

Styling: Colored Input Fields #

Absolutely, this is straightforward with CSS (supported in both ePub 2 and ePub 3). You can target input fields based on their state or custom classes to toggle the green/blue color scheme:

/* Style for available (empty) input fields */
input.available {
  background-color: #2196F3; /* Bright blue */
  border: 1px solid #1976D2;
  color: #fff;
}

/* Style for used (filled) input fields */
input.used {
  background-color: #4CAF50; /* Bright green */
  border: 1px solid #388E3C;
  color: #fff;
}

If you want to automatically switch styles when the user types, add a simple JavaScript snippet (for ePub 3) to detect input changes and swap the class.

Functionality: Input Storage & PDF Email Export #

This requires using ePub 3 (since ePub 2 doesn't support JavaScript), and reader support varies:

1. Input Storage #

You can use the localStorage API in ePub 3 to save user input directly to the reader's local storage. Here's a quick example:

// Save input when the user types
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('input', () => {
    localStorage.setItem(input.id, input.value);
    // Toggle to "used" style once filled
    if (input.value.trim()) input.classList.replace('available', 'used');
  });
});

// Load saved input when the ePub opens
window.addEventListener('load', () => {
  document.querySelectorAll('input').forEach(input => {
    const savedValue = localStorage.getItem(input.id);
    if (savedValue) {
      input.value = savedValue;
      input.classList.replace('available', 'used');
    }
  });
});

Note: Storage is tied to the specific device/reader—data won't sync across devices, and some restrictive readers may disable localStorage.

2. PDF Generation & Email Export #

• PDF Generation: You can embed a lightweight JavaScript library like jsPDF in your ePub to convert input data into a PDF. Most modern ePub 3 readers allow loading external JS libraries, but always test with your target readers first.
• Email Export: Directly attaching the generated PDF to an email via JavaScript is tricky due to security restrictions in ePub readers. A reliable workaround:
  1. Generate the PDF in the reader and prompt the user to download it to their device.
  2. Provide a mailto: link that pre-fills the email subject/body, then instruct the user to manually attach the downloaded PDF.

Example mailto link:

<a href="mailto:your-church-email@example.com?subject=My Church App Data&body=Please find my submitted data attached.">Send Data via Email</a>

Key Caveats #

• Reader Compatibility: Not all ePub readers enable JavaScript (e.g., some older or enterprise-grade tools). Test with the specific readers your congregation will use to ensure functionality works as expected.
• Offline Limitations: Offline ePub readers have stricter security rules than browsers, so some advanced JS features may be restricted.

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