Boostrap 4 清除输入

当我们使用 Boostrap 4 进行表单设计时，经常在输入框中填写了内容后需要清空输入框，而手动删除内容很麻烦，因此我们可以使用 Boostrap 4 的清除输入功能。

HTML 代码

以下是 Boostrap 4 清除输入的 HTML 代码示例：

<div class="form-group">
  <label for="input-example">Example Input</label>
  <div class="input-group">
    <input type="text" class="form-control" id="input-example" placeholder="Example input">
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button" id="btn-clear">Clear</button>
    </div>
  </div>
</div>

JavaScript 代码

为了使清除输入按钮生效，我们需要使用 JavaScript 代码，以下是示例代码：

$(document).ready(function(){
  $("#btn-clear").click(function(){
    $("#input-example").val("");
  });
});

首先，我们使用 $(document).ready() 函数来确保 DOM 加载完成后再执行 JavaScript 代码。接着，我们给清除按钮添加点击事件，当点击按钮时，获取输入框的 ID 并使用 .val("") 方法来清空输入框内容。

总结

使用 Boostrap 4 的清除输入功能可以帮助我们快速清空表单输入框中的内容，提高表单填写效率。以上是一个简单的示例，您可以根据自己的需求进行修改和扩展。