需要一个输入数字替换 - Need an input numbers replacement

我得到了一个显示产品项的php程序。用户应该增加/减少订购数量。我尝试输入type='number'。在桌面上用鼠标就行了。然而，在移动设备上，加减号的箭头不会显示(鼠标在上面)，点击将打开键盘，它覆盖了大部分屏幕。

我现在正在寻找一种方式来显示这种方式:

数量[+]2 [-]

我试过js代码:

<script>
var i = 0;
function buttonClickAdd() {
    i++;
    document.getElementById('inc').value = i;
}
function buttonClickSub() {
    i--;
    document.getElementById('inc').value = i;
}

PHP部分(在foreach循环中):

<button onclick="buttonClickAdd();">[plus]</button>
<input type="text" id="inc" value="0"></input>
<script>i</script>
<button onclick="buttonClickSub();">[minus]</button>

这段代码将触发提交到order.php页面，但我想在此之前增加所有值。我尝试使用type="hidden"和with来显示变量。

我怎么解决它?

要阻止按钮单击提交表单，从侦听器函数返回false(或在事件上调用.preventDefault())。

一般来说，出于可维护性的原因(以及其他原因)，应该像避免瘟疫一样避免生产代码中的内联JavaScript (JavaScript的html属性)。

您将希望避免为每个按钮附加事件侦听器，因此，由于事件冒泡，我们将侦听公共父节点上的单击事件。要做到这一点，我们需要在span标签内包装按钮和输入。

<form>
  <span class="counter">
    <button class="counter-up">+</button>
    <input type="text" class="counter-num" value="0" readonly>
    <button class="counter-dn">-</button>
  </span>
</form>

上面你可以看到我添加了一堆类。父类需要一个类，这样我们就可以很容易地选择它们来监听事件;每个按钮都需要一个类，这样我们就知道要执行什么操作;输入需要一个类，这样我们就可以选择它并对它的值执行操作。

选择所有计数器父节点;循环遍历计数器，创建IIFE，并将计数器及其相应的文本输入作为参数传递;监听父节点上的点击事件;缓存被点击元素的类;根据类增加或减少文本输入的值;返回false;

var counters = document.querySelectorAll('.counter');
//                                   vv IIFE
for(var i in Object.keys(counters)) (function(counter, num){
  counter.onclick = function(e) {
    var cn = e.target.className;
    if(/counter-up/.test(cn)) return ++num.value, false;
    if(/counter-dn/.test(cn)) return --num.value, false;
    //                                          ^ comma operator
  }; 
})(counters[i], counters[i].querySelector('.counter-num'));

逗号操作符在这里很有用，可以节省空间。逗号操作符将计算每个表达式，然后返回最后一个表达式。在上面的代码中，它表示增加或减少输入的值，然后返回false。请参阅下面的演示，以了解所有这些操作。

var counters = document.querySelectorAll('.counter');
for(var i in Object.keys(counters)) (function(counter, num){
  counter.onclick = function(e) {
    var cn = e.target.className;
    if(/counter-up/.test(cn)) return ++num.value, false;
    if(/counter-dn/.test(cn)) return --num.value, false;
  };   
})(counters[i], counters[i].querySelector('.counter-num'));

.counter { display: block; } .counter * { border: 1px solid #bbb; border-radius: 2px; margin: 1px}

<form>
  <span class="counter"><button class="counter-up">+</button><input type="text" class="counter-num" value="0" readonly><button class="counter-dn">-</button></span>
  <span class="counter"><button class="counter-up">+</button><input type="text" class="counter-num" value="0" readonly><button class="counter-dn">-</button></span>
  <span class="counter"><button class="counter-up">+</button><input type="text" class="counter-num" value="0" readonly><button class="counter-dn">-</button></span>
  <span class="counter"><button class="counter-up">+</button><input type="text" class="counter-num" value="0" readonly><button class="counter-dn">-</button></span>
  <span class="counter"><button class="counter-up">+</button><input type="text" class="counter-num" value="0" readonly><button class="counter-dn">-</button></span>
</form>

进一步阅读

逗号算子(MDN)
Document.querySelectorAll() (mdn)
Element.querySelector() (mdn)
RegExp.test() (mdn)
节点列表(MDN)