alex-boom · March 2, 2021 16:29
diff --git a/create-input-number.html b/create-input-number.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>custom input number</title>
  <style>
    .quantity {
      position: relative;
      width: 110px;
      border: 1px solid $gray-light;

      @include media('>=desktop') {
        width: 150px;
      }
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type=number] {
      box-sizing: border-box;
      -moz-appearance: textfield;
    }

    .quantity input {
      position: relative;
      font-size: 12px;
      text-align: center;
      font-weight: 700;
      width: 100%;
      border: none;
      height: 28px;
      z-index: 1;
      // padding: 5px 50px;

      @include media('>=desktop') {
        font-size: 16px;
        height: 38px;
      }
    }

    .quantity input:focus {
      outline: 0;
    }

    .quantity-nav {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24px;
      overflow: hidden;

      @include media('>=desktop') {
        font-size: 30px;
      }
    }

    .quantity-button {
      @include animate(background-color);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      cursor: pointer;
      width: 28px;
      height: 28px;
      background-color: lighten($gray-light, 35%);
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
      z-index: 2;

      @include media('>=desktop') {
        width: 40px;
        height: 38px;
      }

      &:hover {
        background-color: lighten($gray-light, 25%);
      }
    }

    .quantity-button.quantity-up {}

    .quantity-button.quantity-down {
      padding-bottom: 3px;
    }
  </style>
 </head>

 <body>
  <div class="quantity">
    <input name="quantity" type="number" value="1" autocomplete="off" min="1">
  </div>
  <script>
    const initCustomInput = () =>
    {

      $('<div class="quantity-nav"><div class="quantity-button quantity-down">&#8211;</div><div class="quantity-button quantity-up">+</div></div>').insertAfter('.quantity input');

      let quantityWraps = $('.quantity');

      quantityWraps.each(function ()
      {

        let quantityWrap = $(this),
          input = quantityWrap.find('input[name="quantity"]'),
          btn = quantityWrap.find('.quantity-button'),
          min = input.prop('min'),
          max = input.prop('max');

        btn.on('click', function ()
        {

          if ($(this).hasClass('quantity-down')) {
            input.trigger('input', [ 'minus' ]);
          }

          if ($(this).hasClass('quantity-up')) {
            input.trigger('input', [ 'plus' ]);
          }
        });

        input.on('input', function (event, action)
        {

          if (this.value.match(/[^0-9]/g)) {
            this.value = this.value.replace(/[^0-9]/g, "");
          };

          let currentVal = parseInt(this.value || min);

          if (action !== undefined && action == "plus") {
            currentVal++;
          }

          if (action !== undefined && action == "minus") {
            currentVal--;
          }

          if (currentVal >= min && (currentVal <= max || max == "")) {
            $(this).val(currentVal);
          }
        });
      });
    }
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>custom input number</title>
	<style>
	.quantity {
	position: relative;
	width: 110px;
	border: 1px solid $gray-light;

	@include media('>=desktop') {
	width: 150px;
	}
	}

	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
	}

	input[type=number] {
	box-sizing: border-box;
	-moz-appearance: textfield;
	}

	.quantity input {
	position: relative;
	font-size: 12px;
	text-align: center;
	font-weight: 700;
	width: 100%;
	border: none;
	height: 28px;
	z-index: 1;
	// padding: 5px 50px;

	@include media('>=desktop') {
	font-size: 16px;
	height: 38px;
	}
	}

	.quantity input:focus {
	outline: 0;
	}

	.quantity-nav {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 24px;
	overflow: hidden;

	@include media('>=desktop') {
	font-size: 30px;
	}
	}

	.quantity-button {
	@include animate(background-color);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;
	width: 28px;
	height: 28px;
	background-color: lighten($gray-light, 35%);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	z-index: 2;

	@include media('>=desktop') {
	width: 40px;
	height: 38px;
	}

	&:hover {
	background-color: lighten($gray-light, 25%);
	}
	}

	.quantity-button.quantity-up {}

	.quantity-button.quantity-down {
	padding-bottom: 3px;
	}
	</style>
	</head>

	<body>
	<div class="quantity">
	<input name="quantity" type="number" value="1" autocomplete="off" min="1">
	</div>
	<script>
	const initCustomInput = () =>
	{

	$('<div class="quantity-nav"><div class="quantity-button quantity-down">–</div><div class="quantity-button quantity-up">+</div></div>').insertAfter('.quantity input');

	let quantityWraps = $('.quantity');

	quantityWraps.each(function ()
	{

	let quantityWrap = $(this),
	input = quantityWrap.find('input[name="quantity"]'),
	btn = quantityWrap.find('.quantity-button'),
	min = input.prop('min'),
	max = input.prop('max');

	btn.on('click', function ()
	{

	if ($(this).hasClass('quantity-down')) {
	input.trigger('input', [ 'minus' ]);
	}

	if ($(this).hasClass('quantity-up')) {
	input.trigger('input', [ 'plus' ]);
	}
	});

	input.on('input', function (event, action)
	{

	if (this.value.match(/[^0-9]/g)) {
	this.value = this.value.replace(/[^0-9]/g, "");
	};

	let currentVal = parseInt(this.value \|\| min);

	if (action !== undefined && action == "plus") {
	currentVal++;
	}

	if (action !== undefined && action == "minus") {
	currentVal--;
	}

	if (currentVal >= min && (currentVal <= max \|\| max == "")) {
	$(this).val(currentVal);
	}
	});
	});
	}
	</script>
	</body>

	</html>