如何点击单个按钮填充textfield，实现WordPress表单草稿存取功能？

该功能仅需前端JS即可实现，适配WordPress默认自带的jQuery环境，无需额外引入依赖：

• 给触发填充的按钮添加专属类名与自定义属性，示例按钮代码：<button class="fill-empty-fields" data-default-value="通用预设值">填充空字段</button>，如果不同字段需要填充不同预设值，可给对应<input type="text">添加data-field-default="对应字段预设值"属性。
• 功能实现JS代码：

jQuery(document).ready(function($) {
  $('.fill-empty-fields').on('click', function(e) {
    e.preventDefault();
    // 取按钮设置的全局通用预设值
    const globalDefault = $(this).data('default-value');
    // 仅操作当前按钮所在表单的文本框，替换下方选择器为$('input[type="text"]')则会操作页面所有文本框
    $(this).closest('form').find('input[type="text"]').each(function() {
      // 仅填充空值字段
      if ($(this).val().trim() === '') {
        // 优先使用字段自身的预设值，没有则用全局预设
        const fillVal = $(this).data('field-default') || globalDefault;
        $(this).val(fillVal);
      }
    });
  });
});

• 代码部署方式：将上述JS代码放到主题functions.php中通过wp_enqueue_script挂载，或直接插入表单所在页面的自定义HTML区块即可生效。

前端逻辑 #

• 可按需设置两种保存触发逻辑：手动点击保存草稿按钮触发、每15-30秒自动触发一次自动保存
• 保存操作执行时，将当前表单所有字段的键值对转换为JSON字符串，双端备份：未登录用户数据存在浏览器localStorage，登录用户同时异步提交到后端存储，实现跨设备同步
• 加载草稿时优先拉取后端存储的用户专属草稿，无后端数据时读取本地localStorage内容，遍历回填到对应表单字段即可

后端逻辑 #

• 无需额外建表，直接用WordPress原生user_meta存储登录用户的草稿数据即可，按表单唯一ID设置不同的meta_key（例如form_xxx_user_draft，xxx替换为对应表单的唯一标识）区分不同表单的草稿
• 新增两个admin-ajax处理接口：一个接收前端传的草稿JSON字符串，做XSS过滤后存入对应用户的user_meta；另一个接收表单ID参数，返回对应用户的草稿数据
• 可新增定时任务，自动清理超过30天的历史草稿，避免占用数据库空间

注意事项 #

• 包含敏感信息的字段不要存储在localStorage中，仅存入后端数据库
• 所有存储、回填的数据都要做 sanitize 校验，避免注入风险

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