时间戳

首页 > 解决方案 > 输入组前置 - 引导程序 - 可以在输入侧包含重置按钮吗？

forms - 输入组前置 - 引导程序 - 可以在输入侧包含重置按钮吗？

问题描述

我有一个来自 Bootstrap 的前置输入，看起来不错且可修改。我知道我可以在另一侧放另一个按钮，但是那个按钮可以重置吗？我已经尝试了很多东西。这是我所知道的，我将在下面附上图片。

            <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">Your calculation</span>
            </div>
            <input type="number" 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">

这是我正在使用的当前代码，它没有包含在表单中。当我把它包装成一个表格时，事情会因为一个奇怪的原因停止工作。我已经遇到了麻烦，最小/最大和步骤不起作用（我用 JavaScript 控制了最小/最大和步骤）。那么，有没有办法在该输入上添加（或同时添加）第二个按钮而不是在表单中，并使用它将输入字段清除回默认的“”？

这似乎是一项轻松的工作，但这经常会干扰输入的数据。出于一个奇怪的原因，我似乎无法在不打乱 div 的情况下放置一个仅包装此输入的表单。

标签： formstwitter-bootstrapinputprepend

解决方案

注意：虽然这肯定会起作用，但我认为审查 a<form>干扰代码功能的原因符合您的最佳利益。

您无法添加 true<button type="reset">...</button>因为您没有使用 a <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>，但在功能上它实现了相同的结果。

推荐阅读