html 带有自定义控件的微调器输入字段

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 带有自定义控件的微调器输入字段相关的知识,希望对你有一定的参考价值。

.e-spinner {
  position: relative;
  @include inline-block;
  margin-bottom: $space;

  input {
    margin-bottom: 0;
  }

  .icon-increase, .icon-decrease {
    position: absolute;
    right: 0;

    color: $white;
    background-color: $primary-color;
    @include transition(background-color 300ms ease);
    font-size: rem-calc(18);
    line-height: 50%;

    width: 2rem;
    height: 50%;

    &:focus {
      outline: none;
    }

    &:hover {
      background-color: lighten($primary-color, 5);
    }
  }

  .icon-increase {
    top: 0;
    border-top-right-radius: 3px;
  }

  .icon-decrease {
    bottom: 0;
    border-bottom-right-radius: 3px;
  }
}
Utils = {
  initSpinner: function ($elems) {
    $elems.each( function () {
        var self = $(this),
            $input = self.find('input'),
            $buttons = self.find('button'),
            min = $input.attr('min') || -9999,
            max = $input.attr('max') || 9999,
            step = $input.attr('step') || 1;

        $buttons.off('click');
        $buttons.click(function (e) {
            e.preventDefault();

            var $button = $(this),
                sign = $button.hasClass('js-increase') ? '+' : '-',
                oldValue = $input.val() || 0,
                newValue;

            // Calculate new value
            newValue = parseInt(oldValue) + parseInt(sign + step);

            // Check if newValue is between min and max
            if (min <= newValue && newValue <= max) {
                $input.val(newValue);
            }
            $input.change();
            $input.addClass('is-filled');
        });
    });
  }
};
$(function(){
  Utils.initSpinner($('.js-spinner'));
})();
<div class="e-spinner js-spinner">
    <input type="number" value="1" min="0" id="number_field">
    <button class="js-increase icon-increase">keyboard_arrow_up</button>
    <button class="js-decrease icon-decrease">keyboard_arrow_down</button>
</div>

以上是关于html 带有自定义控件的微调器输入字段的主要内容,如果未能解决你的问题,请参考以下文章

Android-XML 自定义微调器

使用微调器从自定义列表视图中删除了错误的行

在项目选择的侦听器上初始化(自定义微调器适配器)

检测对表单控件中文本的所有更改(由用户进行)

自定义 setDropDownViewResource 微调项的示例

使用 InAppBrowser 加载页面和微调器加载后无法输入输入字段