1. 能力说明

JS 脚本会在智能表单填写页完成基础渲染后执行一次。脚本运行在用户浏览器中，可以使用标准 DOM API 操作页面元素。

可以用于：

• 查找字段 DOM
• 修改文案、样式、显隐
• 监听输入、点击、选择等 DOM 事件
• 根据字段值做简单联动
• 监听提交按钮点击

2. CSP 安全策略说明

智能表单填写页会通过 meta 标签配置内容安全策略：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' https://webapi.amap.com; connect-src 'self' https://webapi.amap.com; img-src 'self' data: https:; style-src 'self' 'unsafe-inline';">

该策略主要限制：

• 默认资源只允许加载当前站点资源：default-src 'self'
• 脚本只允许当前站点脚本和高德地图脚本：script-src 'self' 'unsafe-eval' https://webapi.amap.com
• 网络请求只允许请求当前站点和高德地图接口：connect-src 'self' https://webapi.amap.com
• 图片允许当前站点、data: 图片和 HTTPS 图片：img-src 'self' data: https:
• 样式允许当前站点样式和行内样式：style-src 'self' 'unsafe-inline'

对用户脚本的影响：

• 可以操作当前页面 DOM。
• 不允许通过 fetch、XMLHttpRequest 等方式请求未授权第三方接口。
• 不允许加载未授权第三方 JS 文件。
• 可以设置行内样式，例如 element.style.display = 'none'。
• 可以使用 HTTPS 图片或 data: 图片。
• 如果脚本触发了 CSP 限制，浏览器会拦截对应行为。

3. 执行时机

脚本会在表单基础 DOM 渲染完成后执行。

如果目标元素是异步渲染的，例如地址、定位、附件、弹窗类组件，可以用等待函数：

(function () {
  function waitFor(selector, callback, timeout) {
    var start = Date.now();
    var timer = setInterval(function () {
      var el = document.querySelector(selector);
      if (el) {
        clearInterval(timer);
        callback(el);
      } else if (Date.now() - start > (timeout || 5000)) {
        clearInterval(timer);
      }
    }, 100);
  }

  waitFor('[data-key="tel"] input', function (input) {
    input.placeholder = '请输入手机号';
  });
})();

4. 字段选择器

每个字段外层会提供以下 data-* 属性：

<div
  data-key="字段 API Name"
  data-label="字段显示名"
  data-type="字段类型"
  data-required="true/false"
  data-readonly="true/false"
>
</div>

推荐优先级：

1. 推荐：[data-key="tel"]
2. 可用：[data-type="text"]、[data-required="true"]
3. 谨慎：[data-label="姓名"]，字段改名或多语言会影响
4. 不推荐：依赖复杂 DOM 层级，例如 div > div > input

示例：

var telField = document.querySelector('[data-key="tel"]');
var telInput = telField && telField.querySelector('input');

5. 常见字段操作

隐藏字段：

var company = document.querySelector('[data-key="company"]');
if (company) {
  company.style.display = 'none';
}

修改字段标题样式：

var nameField = document.querySelector('[data-key="name"]');
if (nameField) {
  var label = nameField.querySelector('.input-label');
  if (label) {
    label.style.color = '#d93026';
  }
}

监听输入：

var telInput = document.querySelector('[data-key="tel"] input');
if (telInput) {
  telInput.addEventListener('input', function () {
    console.log('当前手机号：', telInput.value);
  });
}

输入框赋值：

function setInputValue(input, value) {
  var descriptor = Object.getOwnPropertyDescriptor(input.__proto__, 'value');
  descriptor.set.call(input, value);
  input.dispatchEvent(new Event('input', { bubbles: true }));
  input.dispatchEvent(new Event('change', { bubbles: true }));
}

var nameInput = document.querySelector('[data-key="name"] input');
if (nameInput) {
  setInputValue(nameInput, '张三');
}

6. 字段联动示例

根据电话字段是否填写，控制公司字段显示：

(function () {
  var telInput = document.querySelector('[data-key="tel"] input');
  var companyField = document.querySelector('[data-key="company"]');

  if (!telInput || !companyField) {
    return;
  }

  function updateCompanyVisible() {
    companyField.style.display = telInput.value ? '' : 'none';
  }

  telInput.addEventListener('input', updateCompanyVisible);
  updateCompanyVisible();
})();

根据来源字段变更，修改销售线索详情提示：

(function () {
  var sourceField = document.querySelector('[data-key="source"]');
  var remarkTextarea = document.querySelector('[data-key="remark"] textarea');

  if (!sourceField || !remarkTextarea) {
    return;
  }

  sourceField.addEventListener('click', function () {
    remarkTextarea.placeholder = '请补充销售线索详情';
  });
})();

7. 提交按钮和提交事件

提交按钮可以通过 name="button_submit" 查找：

var submitButton = document.querySelector('[name="button_submit"]');

重置按钮可以通过 name="button_reset" 查找：

var resetButton = document.querySelector('[name="button_reset"]');

监听提交按钮点击：

var submitButton = document.querySelector('[name="button_submit"]');

if (submitButton) {
  submitButton.addEventListener('click', function () {
    console.log('用户点击了提交按钮');
  });
}

当前填写页不是标准原生 <form> 提交。如需在提交前做轻量判断，建议监听提交按钮 click。

如果只是记录或提示，不要调用 preventDefault()、stopPropagation()，避免影响系统校验和提交。

提交前提示示例：

var submitButton = document.querySelector('[name="button_submit"]');

if (submitButton) {
  submitButton.addEventListener('click', function () {
    var telInput = document.querySelector('[data-key="tel"] input');
    if (telInput && telInput.value) {
      console.log('即将提交，手机号：', telInput.value);
    }
  });
}

8. 使用注意

• 脚本只建议操作当前表单页面 DOM。
• 不要在脚本中保存账号、密码、密钥。
• 不要把客户填写内容发送到未经确认的第三方地址。
• 不要加载未知来源脚本。
• 页面升级后 DOM 可能变化，脚本上线前需要在测试表单验证。
• 脚本报错不会阻断表单基础展示，但错误脚本本身不会继续生效。