html`＆lt;输入类型=“ number”

Question

我有一个html ＆lt; input＆gt;带有type =“ number”：

我想使用step value在1。也就是说，允许任何整数。但是，我还希望箭头按钮通过某个值增加输入的值，例如5。这可能吗？

从 mdn docs ，我找不到一种方法仅使用HTML来实现这一目标。我还将接受一个涉及使用JavaScript更改输入的value的输入事件的答案要关键，与单击箭头按钮所引起的更改。

Answer 1

您始终可以捕获JavaScript中的输入，并使用 Parseint 将值转换为整数，并使用正常步骤来控制箭头步进。

使用此方法，您不必担心区分踏脚和输入，因为无论如何这些步骤已经是整数。

let nums = document.querySelectorAll("input[type='number']");

nums.forEach(function(e){
  e.addEventListener("input",function(el){
    el.target.value = parseInt(el.target.value)    
  });
});

<input type="number" step="4" />

Answer 2

＆lt; label＆gt;覆盖层

使＆lt; label＆gt;在＆lt; input＆gt;的自旋按钮上放置，并且在EventHandler中使用.stepup（）和.stepdown（）方法当单击＆lt; label＆gt;时。

在示例a 中，＆lt; label＆gt;以红色概述，两个嵌套＆lt; b＆gt;以蓝色概述。当然，大纲仅用于演示，很容易被删除。参见示例a

xy协调

另一种方式是放置一个Abspos（ abs olute pos iTioned）＆lt; input＆gt;在RELPOS容器中，如果单击在＆lt; input＆gt;旋转器按钮的XY坐标中，则更改步骤属性。参见示例B 。

中都评论了

示例

详细信息在示例A和B

// Bind <label> to the click event
document.querySelector('.spinner').onclick = incDec;

function incDec(e) {
  // Reference the tag the user clicked
  const clk = e.target;
  // Reference the <input>
  const int = this.previousElementSibling;
  // If the user clicked .inc...
  if (clk.matches('.inc')) {
    //...Increment <input> value by 5
    int.stepUp(5);
  }
  // If the user clicked .dec...
  if (clk.matches('.dec')) {
    //...Decrement <input> value by 5
    int.stepDown(5);
  }
}

.spinner {
  position: relative;
  top: -4px;
  right: 24px;
  z-index: 1;
  display: inline-flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 18px;
  outline: 1px dashed red;
}

.spinner b {
  display: inline-block;
  width: 100%;
  height: 50%;
  outline: 1px blue solid
}

<input id='int' type='number' min='0' step='1'>
<label for='int' class='spinner'><b class='inc'></b><b class='dec'></b></label>

示例B

XY坐标

// Reference <form>
const UI = document.forms.UI;
// Reference all form controls
const IO = UI.elements;
// Reference <fieldset>
const set = IO.set;
// Reference <input>
const int = IO.int;
// Define an empty array to xy coords
let point = [];

// Bind <fieldset> to 'mousemove' event
set.onmousemove = xy;
// Bind <input> to 'mousedown' event
int.onmousedown = setPoint;
/*
Bind <input> to 'mouseup' event
restore step attribute back to 1
*/
int.onmouseup = e => e.target.step = 1;

/*
Assigns current xy coords within the
perimeter of <fieldset> to array point
*/
function xy(e) {
  let x = e.clientX;
  let y = e.clientY;
  point[0] = x;
  point[1] = y;
}

/*
Checks if the user is clicking the <input>
spinner. If user is, then step attribute
is changed to 5
*/
function setPoint(e) {
  let x = point[0];
  let y = point[1];
  if (x > 215 && x < 231 && y > 30 && y < 51) {
    this.step = 5;
  }
}

html {
  font: 300 62.5%/1 Consolas;
}

fieldset {
  position: relative;
  width: 24rem;
  height: 5rem;
}

input {
  position: absolute;
  left: 2.5rem;
  top: 1.85rem;
  width: 19rem;
  font: inherit;
  font-size: 1.6rem;
  text-align: center;
}

<form id='UI'>
  <fieldset id='set'>
    <input id='int' type='number' min='0' step='1'>
  </fieldset>
</form>

Answer 3

目前，无法直接捕获单击旋转器，但是有单击它们。

通过使用不同的事件，可以暂时调整步长。但是，如果用户使用鼠标单击旋转器，将鼠标按下并按下箭头键向上/向下按：

// fires ones right before the value is changed for the first time
input.addEventListener("mousedown", ({ target }) => target.setAttribute("step", 5));
input.addEventListener("mouseup", ({ target }) => target.setAttribute("step", 1));
// fires after release of the mouse key, even if the user moved the mouse
input.addEventListener("change", ({ target }) => target.setAttribute("step", 1));

<input id="input" type="number" step="1" value="0" />