ASP.NET WebForm防重复提交桌面正常，iPhone移动端失效问题

我之前也碰到过类似的移动端浏览器兼容性坑，尤其是iOS上的Safari经常会有和桌面端不一样的DOM行为，咱们一步步来排查和解决你的问题：

问题根源分析 #

你的脚本在桌面端正常但移动端失效，主要可能是这几个原因：

• DOM属性获取的兼容性问题：getAttribute('type')在部分移动端浏览器里返回的结果和直接访问myButton.type不一致，导致你的条件判断不成立，后续修改按钮的代码根本没执行。
• UI更新顺序的延迟：移动端浏览器对disabled属性的处理优先级很高，先禁用按钮再改文本的话，可能因为渲染延迟导致文本没更新。
• ASP.NET按钮的DOM生成差异：虽然你设置了UseSubmitBehavior="False"，但某些场景下ASP.NET可能还是会生成type="submit"的按钮，直接跳过了你的条件判断逻辑。

修复后的脚本 #

把你的脚本改成下面这样，针对移动端兼容性做针对性优化：

// Avoid Multiple Submission
function ClientSideClick(myButton) {
    // Client side validation
    if (typeof Page_ClientValidate === 'function') {
        if (!Page_ClientValidate("vgForm")) {
            return false;
        }
    }

    // 直接访问DOM的type属性（比getAttribute更可靠），同时兼容button和submit类型
    if (myButton.type === 'button' || myButton.type === 'submit') {
        // 先修改文本和样式，再禁用按钮，确保UI能及时更新
        myButton.value = "Wait...";
        myButton.className = "btn-inactive";
        // 加个微小延迟再禁用，给移动端浏览器足够的渲染时间
        setTimeout(() => {
            myButton.disabled = true;
        }, 50);
    }

    // 确保表单能正常提交（兼容不同的UseSubmitBehavior设置）
    if (myButton.form) {
        setTimeout(() => {
            myButton.form.submit();
        }, 100);
    }

    return true;
}

额外优化建议 #

1. 检查实际生成的HTML：在iPhone浏览器里长按按钮查看源码，确认按钮的type属性到底是button还是submit——如果是submit，那原来的条件判断就会跳过处理，这也是移动端失效的常见原因。
2. 给表单加autocomplete="off"：iOS Safari有时候会缓存表单控件的状态，导致修改后的文本不显示，给表单加上这个属性可以避免缓存问题：

   <form id="yourFormId" runat="server" autocomplete="off">
       <!-- 你的表单内容 -->
   </form>
   

3. 改用原生HTML按钮（可选）：如果ASP.NET服务器端按钮的兼容性问题一直存在，可以考虑用原生HTML按钮搭配__doPostBack触发服务器事件，这样对DOM的控制更直接：

   <button id="btnSave" class="btn btn-primary" onclick="ClientSideClick(this);__doPostBack('btnSave','');">Submit</button>
   

这样修改后，应该就能在iPhone的Safari和Chrome移动端正常工作，既可以阻止重复提交，又能正确显示“Wait...”文本了。

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