如何用JavaScript为Gravity Form数字输入框添加增减spinner按钮

以下代码不需要修改Gravity Form插件源码，直接插入站点自定义JS、CSS区域即可生效：

JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有Gravity Form数字输入容器，如需仅适配指定字段，替换为 #field_1_6 .ginput_container_number
  const numberContainers = document.querySelectorAll('.ginput_container_number');
  
  numberContainers.forEach(container => {
    const input = container.querySelector('input[type="number"]');
    if (!input) return;

    // 读取输入框原生配置，和后台设置的step、min、max保持一致
    const step = parseFloat(input.step) || 1;
    const min = parseFloat(input.min) || 0;
    const max = isNaN(parseFloat(input.max)) ? Infinity : parseFloat(input.max);

    // 生成减号按钮
    const minusBtn = document.createElement('button');
    minusBtn.textContent = '-';
    minusBtn.type = 'button';
    minusBtn.classList.add('gf-number-btn', 'gf-minus-btn');

    // 生成加号按钮
    const plusBtn = document.createElement('button');
    plusBtn.textContent = '+';
    plusBtn.type = 'button';
    plusBtn.classList.add('gf-number-btn', 'gf-plus-btn');

    // 插入按钮到输入框两侧
    container.insertBefore(minusBtn, input);
    container.appendChild(plusBtn);

    // 减号点击逻辑
    minusBtn.addEventListener('click', () => {
      const current = parseFloat(input.value) || 0;
      input.value = Math.max(min, current - step);
      // 触发原生事件，兼容Gravity Form校验、条件逻辑
      input.dispatchEvent(new Event('change'));
    });

    // 加号点击逻辑
    plusBtn.addEventListener('click', () => {
      const current = parseFloat(input.value) || 0;
      input.value = Math.min(max, current + step);
      input.dispatchEvent(new Event('change'));
    });
  });
});

配套CSS代码 #

/* 数字容器布局 */
.ginput_container_number {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 加减按钮通用样式 */
.gf-number-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #ccc;
  background: #f8f8f8;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 32px;
  text-align: center;
}
.gf-number-btn:hover {
  background: #eee;
}

/* 隐藏原生数字输入框的默认上下箭头 */
.ginput_container_number input[type="number"] {
  text-align: center;
  -moz-appearance: textfield;
}
.ginput_container_number input[type="number"]::-webkit-outer-spin-button,
.ginput_container_number input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

适配说明 #

• 代码默认适配站点内所有Gravity Form的数字字段，如需仅给指定字段（如示例中的人数字段）生效，将JS第一行的选择器替换为#field_1_6 .ginput_container_number即可
• 数值规则完全复用你在Gravity Form后台为字段设置的步长、最小值、最大值参数，无需额外修改代码
• 按钮点击后会触发输入框原生变更事件，不会影响表单原有校验、条件逻辑、提交等功能

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