jquery - 如何将这些值重置为 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>

图片:

所以我读到我需要使用 button 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 我假设您有递增和递减按钮的代码。由于您的问题仅与重置有关。

我用过 PS2 preventDefault()因为“安全胜于遗憾”的座右铭 :)