How to add clear icon in input fields using materializecss

Question

I'm wondering if someone knows how to add clear button inside a text input using materializecss. (clear button will show once a value is inserted). I've tried from here, but it won't work. Thank you for your help

score 4 · Accepted Answer · answered Apr 05 '18 at 03:50

you'll have to implement that, not very complicated, you add an eventListener for when input's value changes , the event is called input and whenever the value changes you see if it's not empty you display the button, otherwise you hide it

and another eventListener on the button to set the value to empty and hide itself when it's clicked,

materializecss is primarily for styling , and it's up to you to put the button inside the input with margins or positioning

const button = document.getElementById('clear')
const myInput = document.getElementById('myInput')

myInput.addEventListener('input', function(){
    if(this.value != "") button.style.opacity = 1
    else button.style.opacity = 0
});

button.addEventListener('click', function(){
    myInput.value = "";
    this.style.opacity = 0
});

*{
    box-sizing: border-box;
}
#myInput{
    padding: 0 5px;
    
}
#clear{
    opacity: 0;
    float: right;
    position: relative;
    top: -55px;
    transition: opacity 0.2s linear
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<div class="row" >
  <div class="input-field col s12">
    <input id="myInput" type="text" class="validate">
    <label for="email">myInput</label>
    <a class="waves-effect waves-light btn" id="clear">Clear</a>
    </div>
</div>

score 3 · Answer 2 · answered Apr 20 '21 at 22:42

I've created an extension to materializecss so we do not have to add listeners to every document you wish to use the clearable input field on.

/* 
Add this extension to the bottom of the unminified material.js file & re-minify for use in production.

 - Or - 

Add to a .js file after materialize has loaded.

*/

(function ($) {
  "use strict";

  var _defaults = {};

  /**
     * @class
     *
     */

  var ClearableInputField = (function (_Component22) {
    _inherits(ClearableInputField, _Component22);

    /**
       * Construct Tooltip instance
       * @constructor
       * @param {Element} el
       * @param {Object} options
       */
    function ClearableInputField(el, options) {
      _classCallCheck(this, ClearableInputField);

      var _this_custom1 = _possibleConstructorReturn(this, (ClearableInputField.__proto__ || Object.getPrototypeOf(ClearableInputField)).call(this, ClearableInputField, el, options));

      _this_custom1.el.M_ClearableInputField = _this_custom1;
      _this_custom1.options = $.extend({}, ClearableInputField.defaults, options);

      _this_custom1._setupEventHandlers();
      return _this_custom1;
    }

    _createClass(
      ClearableInputField,
      [
        {
          key: "destroy",

          /**
             * Teardown component
             */
          value: function destroy() {
            this._removeEventHandlers();
            this.el.M_ClearableInputField = undefined; 
          },
        }, 
        {
          key: "_setupEventHandlers",
          value: function _setupEventHandlers() {
            this._handleValueChangeBound = this._handleValueChange.bind(this);
            this._handleInputClickBound = this._handleInputClick.bind(this);
            var closeIcon = this.$el.siblings("i");

            this.el.addEventListener("change", this._handleValueChangeBound);
            this.el.addEventListener("keyup", this._handleValueChangeBound);

            if (closeIcon.length) closeIcon[0].addEventListener("click", this._handleInputClickBound);
          },
        },
        {
          key: "_removeEventHandlers",
          value: function _removeEventHandlers() {
            var closeIcon = this.$el.siblings("i");

            this.el.removeEventListener("change", this._handleValueChangeBound);
            this.el.removeEventListener("keyup", this._handleValueChangeBound);

            if (closeIcon.length) closeIcon[0].removeEventListener("click", this._handleInputClickBound);
          },
        },
        {
          key: "_handleValueChange",
          value: function _handleValueChange() {
            if (this.$el.val() == "" || this.$el.val() == null) {
              // this.$el.trigger("blur");
              // this.$el.siblings("label").removeClass("active");
              this.$el.siblings("i").css("opacity", 0);
            } else {
              this.$el.siblings("i").css("opacity", 1);
            }
          },

          /**
             * Handle Range Mousedown and Touchstart
             * @param {Event} e
             */
        },
        {
          key: "_handleInputClick",
          value: function _handleInputClick() {
            this.$el.val("");
            this.$el.trigger("blur");
            this.$el.siblings("label").removeClass("active");
            this.$el.siblings("i").css("opacity", 0);
          },

          /**
             * Handle Range Mousedown and Touchstart
             * @param {Event} e
             */
        },
      ],
      [
        {
          key: "init",
          value: function init(els, options) {
            return _get(ClearableInputField.__proto__ || Object.getPrototypeOf(ClearableInputField), "init", this).call(this, this, els, options);
          },

          /**
             * Get Instance
             */
        },
        {
          key: "getInstance",
          value: function getInstance(el) {
            var domElem = !!el.jquery ? el[0] : el;
            return domElem.M_ClearableInputField;
          },
        },
        {
          key: "defaults",
          get: function () {
            return _defaults;
          },
        },
      ]
    );

    return ClearableInputField;
  })(Component);

  M.ClearableInputField = ClearableInputField;

  if (M.jQueryLoaded) {
    M.initializeJqueryWrapper(ClearableInputField, "clearableInputField", "M_ClearableInputField");
  }
})(cash);

// call new function clearableInputField to initialize. 
$(".clearable-input-field input").clearableInputField();

.input-field.clearable-input-field >.clearBtn {
    opacity: 0;
    float: right;
    position: relative;
    top: -40px;
    transition: opacity 0.2s linear;
    user-select:none;
    cursor: pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.2/iconfont/material-icons.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- 
  Add new <i> tag with the class "clearBtn" to input-field group
-->
<div class="container">
  <div class="card">
    <div class="card-content"> 
      <span class="card-title">
        Clearable Input Fields
      </span>
      <div class="row">
        <form class="col s12">
          <div class="row ">
            <div class="input-field clearable-input-field col s6">
              <input id="first_name" type="text" class="validate">
              <label for="first_name">First Name</label>
              <i class="material-icons red-text clearBtn">clear</i>
            </div>
            <div class="input-field clearable-input-field col s6">
              <input id="last_name" type="text" class="validate">
              <label for="last_name">Last Name</label>
              <i class="material-icons red-text clearBtn">backspace</i>
            </div>
          </div>
          <div class="row">
            <div class="input-field clearable-input-field col s12">
              <input id="password" type="password" class="validate">
              <label for="password">Password</label>
              <i class="material-icons red-text clearBtn">delete</i>
            </div>
          </div>
          <div class="row">
            <div class="input-field clearable-input-field col s12">
              <input id="email" type="email" class="validate">
              <label for="email">Email</label>
              <i class="material-icons red-text clearBtn">sentiment_dissatisfied</i>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

How to add clear icon in input fields using materializecss

2 Answers2