iOS Safari设置disabled属性后表单无法提交问题求助

这是iOS Safari的特有行为，不是代码遗漏——当你在按钮的onclick事件里立即禁用按钮时，Safari会中断表单的提交流程。因为Safari会在点击事件执行完成后，检查按钮状态来确认是否触发表单提交，一旦按钮被提前禁用，就会取消提交动作，而PC浏览器的事件处理逻辑不会有这个限制。

下面是几种可行的解决办法：

方法1：延迟禁用按钮 #

给禁用操作加一个极短的延迟，让表单提交流程先完成，再禁用按钮：

function submitForm() {
    var submitBtn = document.getElementById("submit");
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> &nbsp; Searching...';
    // 延迟10毫秒执行禁用，给表单提交留足时间
    setTimeout(function() {
        submitBtn.setAttribute("disabled", true);
    }, 10);
}

方法2：手动触发表单提交 #

先手动提交表单，再禁用按钮，确保提交动作优先执行：

function submitForm() {
    var submitBtn = document.getElementById("submit");
    // 获取当前按钮所在的表单
    var form = submitBtn.closest('form');
    
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> &nbsp; Searching...';
    // 手动提交表单
    form.submit();
    // 提交完成后禁用按钮
    submitBtn.setAttribute("disabled", true);
}

方法3：临时用CSS模拟禁用效果（可选） #

如果担心延迟或手动提交的潜在问题，可以先不真禁用按钮，用CSS让它看起来不可点击，等表单提交完成后再正式禁用：

function submitForm() {
    var submitBtn = document.getElementById("submit");
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> &nbsp; Searching...';
    // 添加CSS类模拟禁用状态（需提前定义好样式）
    submitBtn.classList.add('disabled-style');
    // 阻止重复点击
    submitBtn.onclick = null;
    
    // 表单提交完成后正式禁用
    submitBtn.closest('form').addEventListener('submit', function() {
        submitBtn.setAttribute("disabled", true);
    });
}

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