明道云 内容页自定义字段 实现银行卡复制功能

// <free_field_name>银行卡号格式化与复制</free_field_name>
// <file_name>BankCardFormatterWithCopy_v4.jsx</file_name>
function BankCardFormatterWithCopy({ formData }) {
  const cardControlId = "697b5fc0c1423b84be8ba78a"; // 银行卡号字段的 controlId
  const cardValue = formData[cardControlId]?.value || ""; // 获取银行卡号字段的值

  const formatCardNumber = (cardNumber) => {
    if (!cardNumber) return "";
    return cardNumber.replace(/\s/g, "").replace(/(\d{4})(?=\d)/g, "$1 ");
  };

  const handleCopy = () => {
    const formattedCardNumber = formatCardNumber(cardValue); // 确保复制的是格式化后的银行卡号
    if (formattedCardNumber) {
      const tempInput = document.createElement("input");
      tempInput.value = formattedCardNumber;
      document.body.appendChild(tempInput);
      tempInput.select();
      try {
        const successful = document.execCommand("copy");
        if (successful) {
          alert("银行卡号已复制！");
        } else {
          alert("复制失败，请手动复制！");
        }
      } catch (error) {
        console.error("复制失败：", error);
        alert("复制失败！请检查浏览器设置或权限。");
      }
      document.body.removeChild(tempInput);
    } else {
      alert("银行卡号为空，无法复制！");
    }
  };

  const formattedCardNumber = formatCardNumber(cardValue);

  return (
    <div className="w-[300px] h-[36px] px-2 border rounded-md border-gray-300 flex items-center justify-between">
      <span className="text-[#333] text-sm">{formattedCardNumber || "无银行卡号"}</span>
      <button
        className="ml-2 px-3 py-1 bg-[#2196f3] text-white text-sm rounded hover:bg-[#1976d2] focus:outline-none"
        onClick={handleCopy}
      >
        复制
      </button>
    </div>
  );
}