获取字段元素示例

/**
* 示例11: 获取字段元素，并使用条件隐藏
* 功能：通过API获取字段DOM元素并进行操作
*/
(function () {
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
  try {
    // 获取各种字段的DOM元素
    const nameField = kinlink.formApi.getFieldElement('文字列__1行__0');
    const emailField = kinlink.formApi.getFieldElement('文字列__1行__3');
    const phoneField = kinlink.formApi.getFieldElement('文字列__1行__2');
    const companyField = kinlink.formApi.getFieldElement('单行文本框_10');

    console.log('获取到的字段元素:');
    console.log('姓名字段:', nameField);
    console.log('邮箱字段:', emailField);
    console.log('电话字段:', phoneField);
    console.log('公司字段:', companyField);

    // 创建操作演示面板
    const demoPanel = createDemoPanel();
    
    // 示例1: 为字段添加自定义样式和事件
    if (nameField) {
      enhanceNameField(nameField);
    }

    // 示例2: 条件性显示/隐藏字段
    setupConditionalVisibility();

    // 示例3: 为字段添加自定义验证提示
    if (emailField) {
      addCustomValidationToEmail(emailField);
    }

    // 示例4: 字段焦点管理
    setupFocusManagement([nameField, emailField, phoneField]);

    // 添加演示面板到表单
    const formElement = document.querySelector('.ant-form') || document.body;
    formElement.insertBefore(demoPanel, formElement.firstChild);

  } catch (error) {
    console.error('获取字段元素操作失败:', error);
  }
});

// 创建演示操作面板
function createDemoPanel() {
  const panel = document.createElement('div');
  panel.style.cssText = `
    margin: 10px 0;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  `;

  panel.innerHTML = `
    <h3 style="margin: 0 0 15px 0; color: #2c3e50; font-size: 18px; font-weight: bold;">
      字段元素操作演示
    </h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;">
      <button id="highlightFields" style="padding: 10px; background: #3498db; color: white; border: none; border-radius: 6px; cursor: pointer;">
        🎯 高亮显示所有字段
      </button>
      <button id="toggleCompanyField" style="padding: 10px; background: #e74c3c; color: white; border: none; border-radius: 6px; cursor: pointer;">
        👁️ 切换公司字段显示
      </button>
      <button id="focusFirstField" style="padding: 10px; background: #27ae60; color: white; border: none; border-radius: 6px; cursor: pointer;">
        📍 聚焦到第一个字段
      </button>
      <button id="showFieldInfo" style="padding: 10px; background: #f39c12; color: white; border: none; border-radius: 6px; cursor: pointer;">
        ℹ️ 显示字段信息
      </button>
    </div>
  `;

  // 绑定按钮事件
  panel.addEventListener('click', handlePanelClick);

  return panel;
}

// 处理演示面板按钮点击
function handlePanelClick(event) {
  const target = event.target;
  
  if (target.id === 'highlightFields') {
    highlightAllFields();
  } else if (target.id === 'toggleCompanyField') {
    toggleCompanyFieldVisibility();
  } else if (target.id === 'focusFirstField') {
    focusToFirstField();
  } else if (target.id === 'showFieldInfo') {
    showAllFieldsInfo();
  }
}

// 高亮显示所有字段
function highlightAllFields() {
  const fieldCodes = ['文字列__1行__0', '文字列__1行__1', '文字列__1行__2', '文字列__1行__3', '单行文本框_10'];
  
  fieldCodes.forEach((fieldCode, index) => {
    const element = kinlink.formApi.getFieldElement(fieldCode);
    if (element) {
      // 添加高亮效果
      element.style.transition = 'all 0.3s ease';
      element.style.background = `hsl(${index * 60}, 70%, 95%)`;
      element.style.border = `2px solid hsl(${index * 60}, 70%, 60%)`;
      element.style.borderRadius = '8px';
      element.style.padding = '10px';
      
      // 3秒后移除高亮
      setTimeout(() => {
        element.style.background = '';
        element.style.border = '';
        element.style.borderRadius = '';
        element.style.padding = '';
      }, 3000);
    }
  });

  kinlink.formApi.showMessage('info', '所有字段已高亮显示，3秒后恢复正常', 3);
}

// 切换公司字段显示状态
let companyFieldHidden = false;
function toggleCompanyFieldVisibility() {
  const companyElement = kinlink.formApi.getFieldElement('单行文本框_10');
  
  if (companyElement) {
    if (companyFieldHidden) {
      companyElement.style.display = '';
      kinlink.formApi.showMessage('success', '公司字段已显示', 2);
    } else {
      companyElement.style.display = 'none';
      kinlink.formApi.showMessage('warning', '公司字段已隐藏', 2);
    }
    companyFieldHidden = !companyFieldHidden;
  }
}

// 聚焦到第一个字段
function focusToFirstField() {
  const firstField = kinlink.formApi.getFieldElement('文字列__1行__0');
  
  if (firstField) {
    const input = firstField.querySelector('input, textarea, select');
    if (input) {
      input.focus();
      input.style.boxShadow = '0 0 10px #3498db';
      setTimeout(() => {
        input.style.boxShadow = '';
      }, 2000);
      kinlink.formApi.showMessage('info', '已聚焦到第一个字段', 2);
    }
  }
}

// 显示所有字段信息
function showAllFieldsInfo() {
  const fieldCodes = ['文字列__1行__0', '文字列__1行__1', '文字列__1行__2', '文字列__1行__3', '单行文本框_10'];
  let info = '字段信息:\n\n';
  
  fieldCodes.forEach(fieldCode => {
    const element = kinlink.formApi.getFieldElement(fieldCode);
    if (element) {
      const rect = element.getBoundingClientRect();
      info += `字段代码: ${fieldCode}\n`;
      info += `位置: ${Math.round(rect.left)}, ${Math.round(rect.top)}\n`;
      info += `大小: ${Math.round(rect.width)} × ${Math.round(rect.height)}\n\n`;
    }
  });
  
  alert(info);
}

// 增强姓名字段
function enhanceNameField(element) {
  if (!element) return;
  
  const input = element.querySelector('input');
  if (input) {
    // 添加输入提示
    input.placeholder = '请输入您的真实姓名';
    
    // 添加自定义事件监听
    input.addEventListener('input', function() {
      if (this.value.length > 10) {
        this.style.borderColor = '#e74c3c';
        kinlink.formApi.showMessage('warning', '姓名长度不应超过10个字符', 2);
      } else {
        this.style.borderColor = '';
      }
    });
  }
}

// 设置条件性可见性
function setupConditionalVisibility() {
  // 监听字段值变化
  kinlink.events.on(kinlink.FormEvents.FIELD_VALUE_CHANGED, (data) => {
    const { fieldCode, value } = data;
    
    // 如果邮箱字段有值，显示公司字段
    if (fieldCode === '文字列__1行__3') {
      const companyElement = kinlink.formApi.getFieldElement('单行文本框_10');
      if (companyElement) {
        if (value && value.includes('@')) {
          companyElement.style.display = '';
          kinlink.formApi.showMessage('info', '检测到邮箱，已显示公司字段', 2);
        } else {
          companyElement.style.display = 'none';
        }
      }
    }
  });
}

// 为邮箱字段添加自定义验证提示
function addCustomValidationToEmail(element) {
  if (!element) return;
  
  const input = element.querySelector('input');
  if (input) {
    input.addEventListener('blur', function() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (this.value && !emailRegex.test(this.value)) {
        this.style.borderColor = '#e74c3c';
        kinlink.formApi.showMessage('error', '请输入有效的邮箱地址', 3);
      } else if (this.value) {
        this.style.borderColor = '#27ae60';
      }
    });
  }
}

// 设置焦点管理
function setupFocusManagement(elements) {
  elements.forEach((element, index) => {
    if (!element) return;
    
    const input = element.querySelector('input, textarea, select');
    if (input) {
      input.addEventListener('keydown', function(e) {
        // Enter键跳到下一个字段
        if (e.key === 'Enter' && index < elements.length - 1) {
          e.preventDefault();
          const nextElement = elements[index + 1];
          if (nextElement) {
            const nextInput = nextElement.querySelector('input, textarea, select');
            if (nextInput) {
              nextInput.focus();
            }
          }
        }
      });
    }
  });
}
})();