如何将这些值重置为0？

Question

按钮/输入的代码：

<div class="input-group input-number-group">
    <div class="input-group-button">
        <span class="input-number-decrement">-</span>
    </div>
         <input class="input-number" max="10" min="0" value="0">
             <div class="input-group-button">
                 <span class="input-number-increment">+</span>
             </div>
     </div>
</div>

图片：

所以我读到我需要使用按钮type =“ reset”， 但这不起作用。

Answer 1

<input type="reset">必须在<form>标签内使用。否则“它”如何知道要重置什么？

就像<input type="submit">提交表单一样，<input type="reset">从表单中清除所有值。因此，如果不使用JavaScript，则可以将数字输入（这是文本输入）和复位输入包装在表单中，然后使用复位输入。见下文

<form>
  <div class="input-group input-number-group">
    <div class="input-group-button">
      <span class="input-number-decrement">-</span>
    </div>
    <input class="input-number" max="10" min="0" value="0">
    <div class="input-group-button">
      <span class="input-number-increment">+</span>
    </div>
    <input type="reset" value="Reset">
  </div>
</form>

如果您不想使用表单，则需要使用javascript（与java无关。因此请不要对其进行标记）

下面带有jQuery和纯javaScript的简单示例。

//jQuery
const btn = $('.jquery')
const numberInput = $('.input-number')
btn.on('click', e => {
  e.preventDefault();
  $(numberInput).val(0)
})

//plain javaScript

const button = document.querySelector('.javascript')
const number = document.querySelector('.input-number')
button.onclick = e => {
  e.preventDefault();
  number.value = 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group input-number-group">
  <div class="input-group-button">
    <span class="input-number-decrement">-</span>
  </div>
  <input class="input-number" max="10" min="0" value="0">
  <div class="input-group-button">
    <span class="input-number-increment">+</span>
  </div>
</div>
<button class="jquery">
reset with jQuery
</button>
<button class="javascript">
reset with plain javaScript
</button>

PS我假设您具有递增和递减按钮的代码。因为您的问题仅是关于重置。

我之所以使用preventDefault()，是因为PS2的座右铭是：“比后悔更安全”：）