如何针对非自定义输入类型运行函数？附SharePoint输入控件示例

我来帮你搞定这个需求！首先得明确：你贴的是SharePoint自带的保存按钮，直接修改它的onclick属性不太靠谱——因为页面刷新或者SharePoint的控件渲染会轻易覆盖掉你的修改。所以咱们得用更稳妥的方式，在不破坏原有保存流程的前提下插入自定义逻辑。

步骤1：精准定位目标按钮 #

你给的按钮有两个关键特征可以用来定位：

• 唯一的name属性：ctl00$ctl40$g_b25debc7_4f96_4b4c_b4bc_f59036684958$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOSaveItem
• value值为Guardar（西班牙语的“保存”）

推荐用document.querySelector获取元素，两种写法任选：

// 方式1：通过value定位（适合页面只有这一个"Guardar"按钮的场景）
const saveBtn = document.querySelector('input[type="button"][value="Guardar"]');

// 方式2：通过name定位（更精准，因为name是SharePoint生成的唯一标识）
const saveBtn = document.querySelector('input[name="ctl00$ctl40$g_b25debc7_4f96_4b4c_b4bc_f59036684958$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOSaveItem"]');

步骤2：插入自定义逻辑（两种可选方案） #

方案一：重写原有点击逻辑，保留原生保存流程 #

这种方式会接管按钮的点击事件，但完整保留SharePoint原有的验证和保存逻辑，适合需要在保存前后插入自定义操作的场景：

// 先把原生的onclick函数存起来
const originalOnClick = saveBtn.onclick;

// 替换成新的点击处理函数
saveBtn.onclick = function(e) {
    // 👉 这里执行你的自定义前置逻辑
    console.log("开始执行自定义函数...");
    yourCustomFunction(); // 替换成你的实际函数

    // 执行原生的保存逻辑
    let saveResult = true;
    if (originalOnClick) {
        // 注意保留原生逻辑的返回值（比如验证不通过会return false）
        saveResult = originalOnClick.call(this, e);
    }

    // 👉 如果需要，在保存完成后执行后置逻辑（可以用定时器确保异步操作完成）
    if (saveResult) {
        setTimeout(() => {
            yourPostSaveFunction();
        }, 1000);
    }

    // 返回原生逻辑的结果，确保验证不通过时能阻止保存
    return saveResult;
};

方案二：用事件监听并行执行逻辑（不修改原生代码） #

这种方式不会覆盖原生的onclick，只是在按钮点击时同步执行你的自定义逻辑，适合不想改动原生流程的场景：

saveBtn.addEventListener('click', function(e) {
    // 执行自定义逻辑
    yourCustomFunction();

    // 如果需要阻止原生保存（比如自定义验证失败），可以用下面的代码
    // if (!yourCustomValidation()) {
    //     e.preventDefault();
    //     alert("验证不通过，无法保存！");
    //     return;
    // }
});

步骤3：确保代码在按钮加载完成后执行 #

SharePoint的控件经常是异步加载的，直接写在页面顶部可能找不到按钮。可以用以下两种方式解决：

方式1：等待DOM完全加载 #

document.addEventListener('DOMContentLoaded', function() {
    // 这里放按钮定位和事件绑定的代码
    initCustomSaveLogic();
});

function initCustomSaveLogic() {
    const saveBtn = document.querySelector('input[type="button"][value="Guardar"]');
    if (saveBtn) {
        // 绑定自定义逻辑（用上面的方案一或二）
        const originalOnClick = saveBtn.onclick;
        saveBtn.onclick = function(e) {
            yourCustomFunction();
            return originalOnClick ? originalOnClick.call(this, e) : true;
        };
    }
}

方式2：监听DOM变化（应对动态加载的按钮） #

如果按钮是异步渲染出来的，用MutationObserver监听DOM变化，直到找到按钮再绑定逻辑：

function waitForSaveButton() {
    const observer = new MutationObserver(function(mutations) {
        const saveBtn = document.querySelector('input[type="button"][value="Guardar"]');
        if (saveBtn) {
            // 找到按钮后绑定逻辑，停止监听
            bindCustomFunctionToSaveBtn(saveBtn);
            observer.disconnect();
        }
    });

    // 监听整个页面的DOM变化
    observer.observe(document.body, { childList: true, subtree: true });
}

function bindCustomFunctionToSaveBtn(btn) {
    // 这里放你的自定义逻辑绑定代码（比如方案一的代码）
    const originalOnClick = btn.onclick;
    btn.onclick = function(e) {
        yourCustomFunction();
        return originalOnClick ? originalOnClick.call(this, e) : true;
    };
}

// 启动监听
waitForSaveButton();

额外注意点 #

• SharePoint自带的验证函数：原生按钮会先调用PreSaveItem()做表单验证，如果你的自定义逻辑需要和验证结合，可以重写这个函数（记得保留原生逻辑）：

  const originalPreSaveItem = window.PreSaveItem;
  window.PreSaveItem = function() {
      // 自定义验证逻辑
      if (!yourCustomValidation()) {
          alert("自定义验证失败！");
          return false;
      }
      // 执行原生验证
      return originalPreSaveItem ? originalPreSaveItem() : true;
  };
  

• 控件标识变化问题：SharePoint生成的name和id可能会随着WebPart布局、页面修改而变化，如果用name定位不稳定，优先用value或者按钮的父容器特征来定位。

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