输入组前缀-引导程序-输入侧可以包含一个复位按钮吗？

问题描述

我有一个带有Bootstrap前缀的输入，看起来不错并且可以修改。我知道我可以在另一侧放另一个按钮，但是该按钮可以重设吗？我已经尝试了多种方法。这是我所知道的，我将在下面附上图片。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='teaApp'>
  <h2>How many cups of tea<br>did you drink?</h2>
  <div id='dayWrapper'></div>
<div id='totals'>
  <div class='totalRow'>
    <p>Weekly Total:</p>
    <p id='weeklyTotal'>0</p>
  </div>
  <div class='totalRow'>
    <p>Monthly Total:</p>
    <p id='monthlyTotal'>0</p>
  </div>
  </div>
</div>

这是我正在使用的当前代码，不包装在表格中。当我将其包装成表格时，由于某种奇怪的原因，事情停止了。我已经对此感到烦恼，最小/最大和步进不起作用（我已经用JavaScript控制了最小/最大和步进）。因此，有没有办法在该输入上添加第二个按钮（或在添加之前同时添加），而无需使用表单，并使用该按钮将输入字段清除为默认的“”？ >

这似乎很容易，但这会不断干扰正在输入的数据。出于一个奇怪的原因，我似乎无法仅在不破坏div的情况下仅包装此输入的表单。

解决方法

注意：虽然这肯定会起作用，但我认为这是您的最佳选择有兴趣查看<form>为何干扰了代码的功能。

您不能添加真实的<button type="reset">...</button>，因为您没有使用<form>，因此“重置”按钮不知道实际“做什么”。您只需对现有代码进行一些修改即可快速完成类似的操作：

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">Your calculation</span>
  </div>

  <input type="number" id="calculation" onkeypress="return isNumberKey(event)" onkeyup="return truncateDecimals(this,2)" id="userInputMapOne" class="form-control" min="0" max="1000" step="0.01" aria-label="input value for your zone" value="e.g 12.34">

  <div class="input-group-append">
    <button role="button" class="btn btn-secondary" onclick="document.getElementById('calculation').value = ''">Reset</button>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

首先，您需要在输入字段中添加一个ID，以便可以使用一些JavaScript轻松定位该字段。然后，您只需要添加一个.input-group-append来扩展input-group以包括我们将要添加的新按钮。

除了发生onclick事件之外，该按钮的操作与任何按钮一样：

document.getElementById('calculation').value = ''

这将找到ID值为calculation的字段，并在发生点击事件时将该字段的值重置为空。这并不是<button type="reset">...</button>实际操作方式的重置，但在功能上可以达到相同的结果。

forms forms forms input input prepend twitter-bootstrap