Question

我想知道是否有人知道如何使用materializecss在文本输入中添加清除按钮。（插入值后，将显示清除按钮）。我已经从here尝试了，但它没有成功。谢谢你的帮助

Answer 1

我已经为 materializecss 创建了一个扩展，因此我们不必为您希望在其上使用可清除输入字段的每个文档添加侦听器。

/* 
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>

Answer 2

你必须实现它，而不是非常复杂，你在输入值改变时添加Array ( [0] => Array ( [Column-1] => Row-1a [Column-2] => Row-1b [Column-3] => Row-1c ) [1] => Array ( [Column-1] => Row-2a [Column-2] => Row-2b [Column-3] => Row-2c ) [2] => Array ( [Column-1] => Row-3a [Column-2] => Row-3b [Column-3] => Row-3c ) )，事件被称为eventListener，每当值发生变化时，你会看到它是否为空显示按钮，否则隐藏它

和按钮上的另一个input将值设置为空并在单击时隐藏自身，

eventListener主要用于样式设置，您可以将按钮放在带边距或定位的输入中

materializecss

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
}

如何使用materializecss在输入字段中添加清晰图标

2 个答案: