Bootstrap 4 Advanced Components : clear button for input fields

Bootstrap 4 Advanced Components : Clear button for input field

by djibe89

HTML

<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row mt-4">
    <div class="col">
      <div class="jumbotron">

        <h1>Clear button for input fields (forms) for Bootstrap 4 - Advanced Components</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4 + Daemonite Material Design)</span>
        <p>
          Plugin for BS4 to add a clear button to any input with standard BS4 tags and material design.<br> Start typing to see the effect.
        </p>
        <ol>
          <li>
            Just add the BS4 .position-relative class to the form-group
          </li>
          <li>
            Add the .form-clear span right before the closing div tag of the .form-group<br> If you don't want to use material icons, you can just replace the i tag by a simple x letter
          </li>
        </ol>
        <p>
          TODO: integrate with floating-label component of Daemonite material design for BS4
        </p>
        <div class="form-group position-relative">
          <label for="example-mail">Email address</label>
          <input type="email" class="form-control" id="example-mail" placeholder="Enter email">
          <span class="form-clear d-none"><i class="material-icons">clear</i></span>
        </div>
        <div class="form-group position-relative">
          <label for="example-input-text">Your name</label>
    ...

CSS

.form-group.position-relative input {
  padding-right: 32px;
}

.form-clear {
  align-items: center;
  background: #cecece;
  border-radius: 50%;
  bottom: 8px;
  color: rgba(0, 0, 0, .54);
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  position: absolute;
  right: 0;
  width: 24px;
  z-index: 10;
}

.form-text+.form-clear {
  bottom: calc(1rem + 18px);
}

.form-clear .material-icons {
  font-size: 16px;
  font-weight: 500;
}

JavaScript

/* Plugin to integrate in your js. By djibe, MIT license */
function bootstrapClearButton() {
  $('.position-relative :input').on('keydown focus', function() {
    if ($(this).val().length > 0) {
      $(this).nextAll('.form-clear').removeClass('d-none');
    }
  }).on('keydown keyup blur', function() {
    if ($(this).val().length === 0) {
      $(this).nextAll('.form-clear').addClass('d-none');
    }
  });
  $('.form-clear').on('click', function() {
    $(this).addClass('d-none').prevAll(':input').val('');
  });
}

// Init the script on the pages you need
bootstrapClearButton();