JS输入字符限制在Safari中失效的原因排查

嘿，看来你在Shopify上做输入框字符限制时碰到了Safari专属的语法坑，我帮你梳理下可能的原因和修复方案：

1. 先定位错误根源 #

你提到错误指向document.querySelector('.section--shipping-address')附近的代码，Safari对CSS选择器、正则表达式的语法兼容性比Chrome/Firefox更严格，常见触发这个错误的场景有：

• CSS选择器包含未转义的特殊字符：比如类名里意外出现了.、[这类符号，Safari会直接判定选择器格式非法
• 用到了Safari不支持的正则高级特性：比如具名捕获组、后行断言这类ES6+语法，旧版Safari完全不兼容
• 目标DOM元素异步加载：Shopify主题常通过AJAX渲染内容，即使DOMContentLoaded触发了，目标元素可能还没生成，后续代码访问属性时也会间接抛出类似错误

2. 针对性修复方案 #

方案一：检查并修正CSS选择器 #

先确认你的选择器完全符合标准语法：

• 核对类名拼写，确保.section--shipping-address确实存在于页面DOM中
• 如果选择器包含特殊字符（比如动态生成的类名带.），必须转义。比如类名是section.shipping-address，要写成document.querySelector('.section\\.shipping-address')

可以先在代码里加调试日志，确认选择器是否能正常找到元素：

document.addEventListener('DOMContentLoaded', function () {
  // 先打印结果，排查选择器问题
  const shippingAddressEl = document.querySelector('.section--shipping-address');
  console.log('找到的地址区块：', shippingAddressEl); // 在Safari控制台看输出
  if (shippingAddressEl) {
    const formValidation = {
      els: {
        el: shippingAddressEl.querySelector('form') // 这里也检查form的选择器
        // ...其他元素选择逻辑
      }
      // ...你的字符限制逻辑
    };
  }
});

方案二：兼容正则表达式语法 #

如果你的字符限制用到了正则，要避开Safari不支持的特性：

• 替换具名捕获组（(?<name>...)）为普通捕获组，通过索引获取匹配内容
• 替换后行断言（(?<=...)/(?<!...)）为字符串切片、indexOf等原生方法实现

比如原来用具名捕获组的代码：

const regex = /(?<prefix>^[A-Za-z]+)\d+/; // Safari旧版本不支持具名组
const match = input.value.match(regex);
const prefix = match?.groups?.prefix;

改成兼容写法：

const regex = /^([A-Za-z]+)\d+/; // 普通捕获组
const match = input.value.match(regex);
const prefix = match ? match[1] : ''; // 通过索引获取匹配内容

方案三：处理异步加载的DOM元素 #

Shopify主题可能延迟渲染地址区块，这时DOMContentLoaded触发时元素还没生成，可以用MutationObserver监听元素出现：

// 封装一个等待元素加载的工具函数
function waitForElement(selector, callback) {
  const observer = new MutationObserver((mutations) => {
    const element = document.querySelector(selector);
    if (element) {
      observer.disconnect();
      callback(element);
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

// 用这个函数替代DOMContentLoaded
waitForElement('.section--shipping-address', function(shippingAddressEl) {
  // 你的表单字符限制逻辑
  const formValidation = {
    els: {
      el: shippingAddressEl.querySelector('form')
      // ...其他逻辑
    }
  };
});

3. Safari调试小技巧 #

打开Safari开发者工具（快捷键Option + Command + I），切换到控制台：

• 查看错误的精确行号，定位到具体代码
• 直接在控制台输入选择器代码，比如document.querySelector('.section--shipping-address')，看是否能返回元素
• 逐行打印变量，排查逻辑断点

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