Bootstrap 4 Advanced Components : clear button v2 for input fields

Bootstrap 4 Advanced Components : Clear button v2 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 v2 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 script to your js and CSS to your CSS.
          </li>
          <li>
            Then add "data-clearButton" html5 attribute to the input you want to have a clear button.
          </li>
        </ol>
        <p>
          TODO: integrate with floating-label component of Daemonite material design for BS4
        </p>
        <div class="form-group">
          <label for="example-mail">Email address</label>
          <input type="email" class="form-control" id="example-mail" placeholder="Enter email" data-clearButton>
        </div>
        <div class="form-group">
          <label for="example-input-text">Your name</label>
          <input type="text" class="form-control" id="example-input-text" placeholder="Enter your name" data-clearButton>
          <small class="form-text text-muted">Example with a helper...

CSS

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

.form-clear {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #cecece;
  border-radius: 50%;
  bottom: 8px;
  color: rgba(0, 0, 0, .54);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 24px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          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

/*! Bootstrap 4 Clear button plugin
 * by djibe
 * Add a clear button to your inputs, for Daemonite : material design for bootstrap 4 available here : https://github.com/Daemonite/material
 * Google material guidelines : https://material.io/guidelines/components/text-fields.html
 * MIT license
 */

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

// Plugin to integrate in your javascript file
function bootstrapClearButton() {
  $('[data-clearButton]').closest('.form-group').addClass('position-relative').append('<span class="form-clear d-none"><i class="material-icons">clear</i></span>');

  $('[data-clearButton]').on('keydown focus', function() {
    if ($(this).val().length > 0) {
      $(this).siblings('.form-clear').removeClass('d-none');
    }
  }).on('keydown keyup blur', function() {
    if ($(this).val().length === 0) {
      $(this).siblings('.form-clear').addClass('d-none');
    }
  });
  $('.form-clear').on('click', function() {
    $(this).addClass('d-none').prevAll(':input').val('');
  });
}