logo标签列表

在HTML5中为数字输入类型显示旋转器

csshtml
3

我正在使用HTML5，使用数字控件 (input type="number")。默认情况下，我需要在控件中看到微调器（上下箭头），但现在只有在悬停时才可见。

我能用CSS实现吗？还是有其他方法？

1
可能是重复的问题：数字输入框 - 总是显示微调按钮 - user247702
不算是重复问题；另一个问题只针对Chrome。 - Jukka K. Korpela
4个回答
6
您可以使用伪类-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;
}

查看此代码片段，以查看一个工作示例。

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

1
0

希望这个解决方案能够帮助你或其他遇到这个问题的人。

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>

1
关于“感谢耶稣”的事情是什么？他帮了你什么忙吗？哈哈 - XAMlMAX
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接