Question

我正在使用HTML5，我正在使用数字控件（input type="number"）。默认情况下，我需要在控件中显示微调器（向上和向下箭头），现在在悬停时它是可见的。

我可以通过CSS实现吗？或者还有其他方法吗？

Answer 1

您可以使用伪类-webkit-inner-spin-button和-webkit-outer-spin-button来实现此目的。请注意，此技巧仅适用于基于Webkit的浏览器，例如Chrome。

示例：

/* Always */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    opacity: 1;
}

由于您希望在触发悬停事件时显示，因此上一个示例为：

/* On hover */
input[type=number]:hover::-webkit-inner-spin-button, 
input[type=number]:hover::-webkit-outer-spin-button { 
    opacity: 1;
}

选中此snippet以查看有效示例。

如果要将功能扩展到其他浏览器，则需要创建窗口小部件。最快的方法是使用jQuery UI Spinner widget。

Answer 2

希望此解决方案可以帮助您或其他人解决此问题。

console.log("Thank You Jesus!");

$(document).ready(function() {

  /* alert("ready");//Thank You Saviour */
  var minusButton = $(".spinnerMinus"); //to aquire all minus buttons
  var plusButton = $(".spinnerPlus"); //to aquire all plus buttons

  //Handle click
  minusButton.click(function() {
    trigger_Spinner($(this), "-", {
      max: 10,
      min: 0
    }); //Triggers the Spinner Actuator
  }); /*end Handle Minus Button click*/

  plusButton.click(function() {
    trigger_Spinner($(this), "+", {
      max: 10,
      min: 0
    }); //Triggers the Spinner Actuator    
  }); /*end Handle Plus Button Click*/

});



//This function will take the clicked button and actuate the spinner based on the provided function/operator
// - this allows you to adjust the limits of specific spinners based on classnames
function trigger_Spinner(clickedButton, plus_minus, limits) {

  var valueElement = clickedButton.closest('.customSpinner').find('.spinnerVal'); //gets the closest value element to this button
  var controllerbuttons = {
    minus: clickedButton.closest('.customSpinner').find('.spinnerMinus'),
    plus: clickedButton.closest('.customSpinner').find('.spinnerPlus')
  }; //to get the button pair associated only with this set of input controls//THank You Jesus!

  //Activate Spinner
  updateSpinner(limits, plus_minus, valueElement, controllerbuttons); //to update the Spinner

}



/*
	max - maxValue
  min - minValue
  operator - +/-
  elem - the element that will be used to update the count
*/ //Thank You Jesus!
function updateSpinner(limits, operator, elem, buttons) {

  var currentVal = parseInt(elem.val()); //get the current val

  //Operate on value -----------------
  if (operator == "+") {
    currentVal += 1; //Increment by one  
    //Thank You Jesus ----------------
    if (currentVal <= limits.max) {
      elem.val(currentVal);
    }
  } else if (operator == "-") {
    currentVal -= 1; //Decrement by one
    //Thank You Jesus ----------------
    if (currentVal >= limits.min) {
      elem.val(currentVal);
    }
  }

  //Independent Controllers - Handle Buttons disable toggle ------------------------
  buttons.plus.prop('disabled', (currentVal >= limits.max)); //enable/disable button
  buttons.minus.prop('disabled', (currentVal <= limits.min)); //enable/disable button  

}

.spinnerVal {
  text-align: center;
}

.customSpinner {
  display: flex;
  margin-bottom: 10px;
}


/*Apply individual Styles to one*/

.spinner-roundVal {
  margin: auto 2px;
  border-radius: 20px !important;
  width: auto !important;
}

.spinner-roundbutton {
  border-radius: 100px !important;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css" />

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

<body>
  <!-- God is good. -->

  <div class="container">

    <h4 style="text-align:center;margin-bottom:50px;margin-top:5%;margin-bottom:5%;">
      Simple Bootstrap Spinners
    </h4>

    <div class="row" style="
        
                                  display: flex;
                                  justify-content: center;
                  flex-direction: column;
                                  align-items: center;
      
      ">

      <div class="col-lg-4">

        <!--Input Form1-->
        <div class="input-group customSpinner <!--Thank You Jesus!-->">
          <div class="input-group-prepend">
            <button class="btn btn-primary spinnerbutton spinnerMinus spinner-roundbutton">
                <span class = "fa fa-minus"></span>
              </button>
          </div>
          <input type="text" readonly value="0" class="form-control spinnerVal spinner-roundVal" />
          <div class="input-group-append">
            <button class="btn btn-primary spinnerbutton spinnerPlus spinner-roundbutton">
                <span class = "fa fa-plus"></span>
              </button>
          </div>
        </div>

      </div>

      <div class="col-lg-4">

        <!--Input Form2-->
        <div class="input-group customSpinner <!--Thank You Jesus!-->">
          <div class="input-group-prepend">
            <button class="btn btn-danger spinnerbutton spinnerMinus">
                <span class = "fa fa-minus"></span>
              </button>
          </div>
          <input type="text" readonly value="0" class="form-control spinnerVal" />
          <div class="input-group-append">
            <button class="btn btn-danger spinnerbutton spinnerPlus">
                <span class = "fa fa-plus"></span>
              </button>
          </div>
        </div>

      </div>

      <div class="col-lg-4">

        <!--Input Form3-->
        <div class="input-group customSpinner <!--Thank You Jesus!-->">
          <div class="input-group-prepend">
            <button class="btn btn-warning spinnerbutton spinnerMinus">
                <span class = "fa fa-minus"></span>
              </button>
          </div>
          <input type="text" readonly value="0" class="form-control spinnerVal" />
          <div class="input-group-append">
            <button class="btn btn-warning spinnerbutton spinnerPlus">
                <span class = "fa fa-plus"></span>
              </button>
          </div>
        </div>

      </div>

      <div class="col-lg-4">

        <!--Input Form4-->
        <div class="input-group customSpinner <!--Thank You Jesus!-->">
          <div class="input-group-prepend">
            <button class="btn btn-success spinnerbutton spinnerMinus">
                <span class = "fa fa-minus"></span>
              </button>
          </div>
          <input type="text" readonly value="0" class="form-control spinnerVal" />
          <div class="input-group-append">
            <button class="btn btn-success spinnerbutton spinnerPlus">
                <span class = "fa fa-plus"></span>
              </button>
          </div>
        </div>


      </div>

    </div>

  </div>



</body>
<!-- God is good. -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"></script>

</html>

Answer 3

输入类型编号在iPhone上不显示增加/减少按钮

它内置在jQuery UI中-http://jqueryui.com/spinner/

或在此处查看示例：http://codepen.io/gmkhussain/pen/mgoZjK

Answer 4

如果您拥有vue.js v-money-spinner ：）

DEMO

在HTML5中显示spinner的输入类型编号

4 个答案: