如何通过自定义jQuery/JavaScript为WordPress网站输入框全局添加禁用Grammarly属性？

绝对可以！手动给每个表单字段挨个加属性太浪费时间了，用jQuery或者原生JavaScript都能轻松实现全局批量操作，彻底解决Grammarly对表单可用性的干扰问题。

首先明确一下，Grammarly官方认可的禁用属性是data-gramm="false"，只要给输入字段加上这个属性，就能阻止它在该字段上运行。下面是两种具体实现方案：

方案一：使用jQuery（适合已引入jQuery的项目） #

如果你的项目已经在用jQuery，直接用下面的代码就能搞定：

$(document).ready(function() {
  // 覆盖所有常见的可输入字段类型
  $('input[type="text"], input[type="email"], input[type="password"], textarea, [contenteditable="true"]')
    .attr('data-gramm', 'false');
});

说明： #

• $(document).ready()确保代码在DOM完全加载后执行，避免找不到元素的问题
• 选择器包含了文本输入框、邮箱框、密码框、文本域，以及设为可编辑的元素，你可以根据项目实际情况添加或移除字段类型

方案二：原生JavaScript（无依赖，通用场景） #

如果不想依赖jQuery，用原生JS也能实现同样的效果：

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有目标输入元素
  const targetFields = document.querySelectorAll(
    'input[type="text"], input[type="email"], input[type="password"], textarea, [contenteditable="true"]'
  );
  
  // 遍历所有元素添加禁用属性
  targetFields.forEach(field => {
    field.setAttribute('data-gramm', 'false');
  });
});

处理动态加载的表单 #

如果你的页面有通过AJAX、弹窗等方式动态加载的表单，上面的代码只会处理页面初始加载的元素。这时候可以用DOM变化监听来覆盖动态添加的元素：

原生JS MutationObserver实现 #

// 创建观察者实例
const grammarlyObserver = new MutationObserver(function(mutations) {
  mutations.forEach(mutation => {
    // 只处理新增的节点
    if (mutation.addedNodes.length === 0) return;
    
    mutation.addedNodes.forEach(node => {
      // 只处理元素节点
      if (node.nodeType !== 1) return;
      
      // 检查当前节点是否是目标字段
      const isTargetField = ['INPUT', 'TEXTAREA'].includes(node.tagName) || node.hasAttribute('contenteditable');
      if (isTargetField) {
        node.setAttribute('data-gramm', 'false');
      }
      
      // 检查节点的子元素中是否有目标字段
      const childFields = node.querySelectorAll(
        'input[type="text"], input[type="email"], input[type="password"], textarea, [contenteditable="true"]'
      );
      childFields.forEach(field => field.setAttribute('data-gramm', 'false'));
    });
  });
});

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

这个观察者会持续监控页面的DOM变化，只要有新元素添加进来，就自动给符合条件的输入字段加上禁用属性，完美覆盖动态加载的内容。

不管选哪种方案，都能帮你省去手动修改每个表单的麻烦，一次性解决Grammarly的干扰问题。

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