输入微调器使用 javascript 添加到输入数字答案

【问题标题】：input spinner add with javascript to input number输入微调器使用 javascript 添加到输入数字
【发布时间】：2021-10-28 09:29:52
【问题描述】：

朋友们，我在我的网站上使用了重力表单生成器。

对于输入数字字段，我需要能够使用 + 和 - 按钮增加或减少数字。

据我所知，可以通过 JavaScript 添加两个按钮并给定 css。

请帮我看看哪些 JavaScript 代码可以做到这一点？

重力表单插件字段的结构如下：

<div id="field_1_6" class="gfield gfield--width-full gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
    <label class="gfield_label" for="input_1_6">
        Number of People
        <span class="gfield_required">
            <span class="gfield_required gfield_required_asterisk">
                *
            </span>
        </span>
    </label>
    <div class="ginput_container ginput_container_number">
        <input name="input_6" id="input_1_6" type="number" step="any" value="" class="large" aria-required="true" aria-invalid="false">
    </div>
</div>

【问题讨论】：

标签： javascript wordpress gravity-forms-plugin

【解决方案1】：

var score = 0
 function up(){
  score ++;
  document.getElementById("result").innerHTML = score;
}


function down(){
  if(score > 0 ){
    score --;
  }
  document.getElementById("result").innerHTML = score;
}   

<div>
  <button onclick="up()"> + </button>
  <p id="result"></p>
  <button onclick="down()"> - </button>  
<div>

【讨论】：

谢谢，在重力形式中我无法更改 html。我可以使用 JavaScript 将这个 html 标签添加到字段中吗？
请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。
@Community 我把结构代码放在下面。

【解决方案2】：

我可以用JavaScript解决这个问题，我把代码放在这里，如果有人遇到这个问题可以使用它。

这段代码没有样式，你可以根据自己的喜好来css

jQuery('<div class="quantity-button quantity-up"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.93585 6.41509H15.0642V9.0566H8.93585V16H6.1283V9.0566H0V6.41509H6.1283V0H8.93585V6.41509Z" fill="#909090"/></svg></div><div class="quantity-button quantity-down"><svg width="13" height="2" viewBox="0 0 13 2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.4238 1.80838H0.423828V0H12.4238V1.80838Z" fill="#909090"/></svg></div>').insertAfter('.quantity input');
jQuery('.ginput_container_number').each(function() {
  var spinner = jQuery(this),
    input = spinner.find('input[type="number"]'),
    btnUp = spinner.find('.quantity-up'),
    btnDown = spinner.find('.quantity-down'),
    min = input.attr('min'),
    max = input.attr('max');

  btnUp.click(function() {
    var oldValue = parseFloat(input.val());
    if (oldValue >= max) {
      var newVal = oldValue;
    } else {
      var newVal = oldValue + 1;
    }
    spinner.find("input").val(newVal);
    spinner.find("input").trigger("change");
  });

  btnDown.click(function() {
    var oldValue = parseFloat(input.val());
    if (oldValue <= min) {
      var newVal = oldValue;
    } else {
      var newVal = oldValue - 1;
    }
    spinner.find("input").val(newVal);
    spinner.find("input").trigger("change");
  });
});

【讨论】：