主页 / 问题 / 711651
Accepted
Daniil Dubchenko
Asked:2020-08-29 01:44:00 +0000 UTC2020-08-29 01:44:00 +0000 UTC

如何更改输入中的箭头 [type="number"]

  • 772

.dateInput-day,
.dateInput-month {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
}
<form class="dateInput">
  <input type="number" class="dateInput-day">
  <input type="number" class="dateInput-month">
</form>

我有这样的代码，当然，如果可能的话，我需要调整上下箭头的设计。

  • 将按钮移到字段外，在右侧
  • 风格化按钮：圆边和改变颜色

希望有人知道，提前谢谢。

javascript

4 个回答

  1. Best Answer

    jQuery解决方案：

    $('.number .number_controls > div').on('click', function() {
  var input = $(this).closest('.number').find('input'); // инпут
  var value = parseInt(input.val()) || 0; // получаем value инпута или 0
  if ($(this).hasClass('nc-minus')) {
    value = value - 1; // вычитаем из value 1
  }
  if ($(this).hasClass('nc-plus')) {
    value = value + 1; // прибавляем к value 1
  }
  input.val(value).change(); // выводим полученное value в инпут; триггер .change() - на случай, если на изменение этого инпута у вас уже объявлен еще какой-то обработчик
});
    * {
  box-sizing: border-box;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type='number'] {
  -moz-appearance: textfield;
}

.number {
  display: inline-block;
  position: relative;
  padding-right: 30px;
}

.number input {
  height: 30px;
}

.number_controls {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 30px;
}

.number_controls>div {
  width: 30px;
  height: 15px;
  line-height: 15px;
  cursor: pointer;
  text-align: center;
}

.number_controls>div:hover {
  background: #ccc;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="number">
  <input type="number" />
  <div class="number_controls">
    <div class="nc-plus">+</div>
    <div class="nc-minus">-</div>
  </div>
</div>

    为了避免在不同浏览器中输入不正确显示形式的可能“麻烦”，您通常可以拒绝type="number"并使用通常的type="text"，在添加“禁止”输入除数字和减号以外的任何字符之后：

    $('.number input').on('input change paste', function() {
  $(this).val(this.value.replace(/[^0-9\-]/, '')); // запрещаем ввод любых символов, кроме цифр и знака минуса
});

$('.number .number_controls > div').on('click', function() {
  var input = $(this).closest('.number').find('input'); // инпут
  var value = parseInt(input.val()) || 0; // получаем value инпута или 0
  if ($(this).hasClass('nc-minus')) {
    value = value - 1; // вычитаем из value 1
  }
  if ($(this).hasClass('nc-plus')) {
    value = value + 1; // прибавляем к value 1
  }
  input.val(value).change(); // выводим полученное value в инпут; триггер .change() - на случай, если на изменение этого инпута у вас уже объявлен еще какой-то обработчик
});
    * {
  box-sizing: border-box;
}

.number {
  display: inline-block;
  position: relative;
  padding-right: 30px;
}

.number input {
  height: 30px;
}

.number_controls {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 30px;
}

.number_controls>div {
  width: 30px;
  height: 15px;
  line-height: 15px;
  cursor: pointer;
  text-align: center;
}

.number_controls>div:hover {
  background: #ccc;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="number">
  <input type="text" />
  <div class="number_controls">
    <div class="nc-plus">+</div>
    <div class="nc-minus">-</div>
  </div>
</div>

    value无需挤压即可“重新计算”的选项ЛКМ：

    $('.number input').on('input change paste', function() {
  $(this).val(this.value.replace(/[^0-9\-]/, '')); // запрещаем ввод любых символов, кроме цифр и знака минуса
});

$('.number').each(function() {
  var numb = $(this),
    controls = numb.find('.number_controls div'),
    input = numb.find('input'), // инпут    
    interval,
    timeout;
  controls.each(function() {
    var control = $(this);
    var pressed = false;
    control.on('mousedown', function() {
      timeout = setTimeout(function() {
        pressed = true;
      }, 51);
      var value = parseInt(input.val()) || 0;
      interval = setInterval(function() {
        if (pressed) {
          if (control.hasClass('nc-minus')) {
            value = changeValue(value, 'minus');
          } else if (control.hasClass('nc-plus')) {
            value = changeValue(value, 'plus');
          }
          input.val(value).change();
        }
      }, 50);
    });

    control.on('mouseup', function() {
      var value = parseInt(input.val()) || 0;
      if (control.hasClass('nc-minus')) {
        value = changeValue(value, 'minus');
      } else if (control.hasClass('nc-plus')) {
        value = changeValue(value, 'plus');
      }
      input.val(value).change();

      pressed = false;
      clearInterval(interval);
    });

    control.on('mouseout', function() {
      clearInterval(interval);
    });
  });

  function changeValue(val, type) {
    if (type == 'minus') {
      val = val - 1;
    } else if (type == 'plus') {
      val = val + 1;
    }
    return val;
  }

});
    * {
  box-sizing: border-box;
}

.number {
  display: inline-block;
  position: relative;
  padding-right: 30px;
}

.number input {
  height: 30px;
}

.number_controls {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 30px;
}

.number_controls>div {
  width: 30px;
  height: 15px;
  line-height: 15px;
  cursor: pointer;
  text-align: center;
}

.number_controls>div:hover {
  background: #ccc;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="number">
  <input type="text" />
  <div class="number_controls">
    <div class="nc-plus">+</div>
    <div class="nc-minus">-</div>
  </div>
</div>
<br /><br />
<div class="number">
  <input type="text" />
  <div class="number_controls">
    <div class="nc-plus">+</div>
    <div class="nc-minus">-</div>
  </div>
</div>

    • 4

  2. 不幸的是，这些按钮无法使用 CSS 设置样式，但有一些方法可以使用附加组件。PrimeFaces UI 等库。

    如何安装：https ://www.primefaces.org/primeui/#setup

    微调器组件：https ://www.primefaces.org/primeui/#spinner

    连接库后，组件在 2 行中初始化：

    $('#default').puispinner();

<input id="default" type="text" />

    PS 组件库消除了一堆乱七八糟的未知bug代码

    • 2

  3. 不幸的是，无法使用 CSS 进行样式设置，但您可以使用 JS。纯 JS 解决方案是这样的：

    function input_val( dir, elid ) {
	console.log(dir + " " + elid)
	var inputEl = document.getElementById(elid)
  console.log(inputEl)
	var value = parseInt(inputEl.value, 10)
  if (isNaN(value))
  	value = 0
  	
	if (dir == "dec")
		value--
  else if (dir == "inc")
		value++
    
  inputEl.value = value
}
    #dateInput-day,
#dateInput-month {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
}
button {
    width: 25px;
    height: 25px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
}
    <form class="dateInput">
  <input type="input" id="dateInput-day"> 
  <button type="button" onclick="input_val('dec','dateInput-day')">-</button>
  <button type="button" onclick="input_val('inc','dateInput-day')">+</button>
  <input type="input" id="dateInput-month">
  <button type="button" onclick="input_val('dec','dateInput-month')">-</button>
  <button type="button" onclick="input_val('inc','dateInput-month')">+</button>
</form>

    当然，解决方案需要定制，但这是一个完全可行的选项。

    • 1

  4. 我为这个 numberPlugin 制作了一个特殊的插件，一切都是用俄语写的，如何连接，它已经在多个真实站点上使用过插件样式输入 type=number 插件站点https://number-plugin.ru 添加到头部连接插件

    `<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="number_plugin/number_plugin.js" type="text/javascript"> </script>
<link href="number_plugin/number_plugin.css" type="text/css" rel="stylesheet">`

    创建一个像 input type="number" 这样的元素

    <input type="number" class="numb" id="1" value="1">

    在 JavaScript 文件中

    $(document).ready(function () { $('.numb').number_plugin(); });

    • 0

相关问题