如何在输入类型=＆＃34;输入＆＃34;中添加旋转按钮？

Question

我想在<div>内添加input type="input"标记，以获取仅限数字的输入字段。我知道它无法完成，但我想知道是否有某种方法可以在输入字段中添加+和 - 按钮，而不是input type="number"。由于我不会进入的原因（我花了两天时间来解决问题），我无法使用input type="number"。

如何为没有旋转按钮的input制作自定义旋转按钮？关于SO的大多数其他问题都是在数字输入中询问样式/隐藏旋转按钮。

Answer 1

我建议你制作一个包含输入数字一侧的大div，另一方面制作另一个div，其中包含两个按钮，一个位于另一个顶部。

Answer 2

由于某些原因您无法使用type="number"，因此这是一个小型自定义步进器。

var numberSteppers = document.querySelectorAll('.numberStepper input');
for(var i = 0; i < numberSteppers.length; i++){
  numberSteppers[i].oninput = function(){
    this.value = !isNaN(this.value) ? parseInt(this.value) : 0;
  }
}

var stepperButtons = document.querySelectorAll('.numberStepper button');
for(var j = 0; j < stepperButtons.length; j++){
  stepperButtons[j].onclick = function(e){
    e.preventDefault();
    var input = this.parentNode.previousElementSibling;
    input.value = input.value !== '' ? parseInt(input.value) + parseInt(this.value) : parseInt(this.value);
  }
}

.numberStepper, .numberStepper *{
  box-sizing:border-box;
}

.numberStepper{
  max-width:200px;
  position:relative;
}

.numberStepper input{
  display:block;
  width:80%;
  font-size:2em;
  min-height:3ex;
  padding:1ch;
  text-align:right;
}

.numberStepper .steppers{
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:20%;
}

.numberStepper button{
  margin:0;
  padding:0;
  border:1px solid;
  width:100%;
  cursor:pointer;
  height:50%;
}

<div class="numberStepper">
  <input type="text"/>
  <div class="steppers">
    <button value="1">+</button>
    <button value="-1">-</button>
  </div>
</div>

Answer 3

如果由于某种原因您不想要添加div或将输入类型更改为number，则可以使用此解决方案。

＆＃13;

＆＃13;

jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
jQuery('.quantity').each(function() {
  var spinner = jQuery(this),
    input = spinner.find('input[type="text"]'),
    btnUp = spinner.find('.quantity-up'),
    btnDown = spinner.find('.quantity-down'),
    min = input.attr('min'),
    max = input.attr('max');

  btnUp.click(function() {
    var oldValue = parseFloat(input.val());
    if (oldValue >= max) {
      var newVal = oldValue;
    } else {
      var newVal = oldValue + 1;
    }
    spinner.find("input").val(newVal);
    spinner.find("input").trigger("change");
  });

  btnDown.click(function() {
    var oldValue = parseFloat(input.val());
    if (oldValue <= min) {
      var newVal = oldValue;
    } else {
      var newVal = oldValue - 1;
    }
    spinner.find("input").val(newVal);
    spinner.find("input").trigger("change");
  });
});

＆＃13;

.quantity {
  position: relative;
}
input[type=text]::-webkit-inner-spin-button,
input[type=text]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=text] {
  -moz-appearance: textfield;
}
.quantity input {
  width: 45px;
  height: 42px;
  line-height: 1.65;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  padding-left: 20px;
  border: 1px solid #eee;
}
.quantity input:focus {
  outline: 0;
}
.quantity-nav {
  float: left;
  position: relative;
  height: 42px;
}
.quantity-button {
  position: relative;
  cursor: pointer;
  border-left: 1px solid #eee;
  width: 20px;
  text-align: center;
  color: #333;
  font-size: 13px;
  font-family: "Trebuchet MS", Helvetica, sans-serif !important;
  line-height: 1.7;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid #eee;
}
.quantity-button.quantity-down {
  position: absolute;
  bottom: -1px;
  height: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quantity">
  <input type="text" value="1">
</div>

＆＃13;

＆＃13;

＆＃13;

此解决方案似乎适用于Chrome和Edge。 （未在其他浏览器上测试过）。

致this的信用。