admin 管理员组

文章数量: 1086019

I've got a number field that I use as a quantity value and I need values of the following format to be accepted by the field. 

0.01
0.1
1

So I created my input field like so:

<input type="number" step=".01">

The arrows to the right of the field and the up/down keyboard buttons increment the value by .01. However, I need to maintain this precision but when the user clicks the up/down arrow or presses the up/down keys, I want the field to increment/decrement by .5 which is the more standard use case.

I did have this working with a jQuery listener on input, but that also caused problems when I directly typed in the value since the listener was fired then as well.

I've got a number field that I use as a quantity value and I need values of the following format to be accepted by the field. 

0.01
0.1
1

So I created my input field like so:

<input type="number" step=".01">

The arrows to the right of the field and the up/down keyboard buttons increment the value by .01. However, I need to maintain this precision but when the user clicks the up/down arrow or presses the up/down keys, I want the field to increment/decrement by .5 which is the more standard use case.

I did have this working with a jQuery listener on input, but that also caused problems when I directly typed in the value since the listener was fired then as well.

  • javascript
  • jquery
  • html
Share Improve this question asked Sep 20, 2018 at 21:38 Cannon MoyerCannon Moyer 3,1744 gold badges37 silver badges83 bronze badges 1
  • 1 Your description seems inconsistent--how can you step in 0.5 and get from 1 to 0.1 to 0.01? It appears you want multiples of 10, not steps of 0.5; I don't see how it's possible to have both. Please confirm. – ggorlen Commented Sep 20, 2018 at 21:55
Add a ment  | 

2 Answers 2

Reset to default 6

Basically, you need to change its set value property between:

<input type="number" step=".01">

and

<input type="number" step=".5"> When the user clicks the up/down arrow or presses the up/down keys.

So, I've made an example in JavaScript to illustrate this particular scenario.

Something like this:

(function() {
  var numberFields = document.querySelectorAll("input[type=number]"),
    len = numberFields.length,
    numberField = null;

  for (var i = 0; i < len; i++) {
    numberField = numberFields[i];
    numberField.onclick = function() {
      this.setAttribute("step", ".5");
    };
    numberField.onkeyup = function(e) {
      if (e.keyCode === 38 || e.keyCode === 40) {
        this.setAttribute("step", ".01");
      }
    };
  }
}());
<input type="number" step=".01">

You can't do this with an number input, but with a text input, the magic happens...

I've styled it a bit so you can see when it's valid and invalid.

It is possible to use negative numbers in here, so if you want that I can edit it, but it gets a little wacky around -1 to 0.

let input = document.getElementById('addNum');
increment = 0.5;

input.onkeydown = function(e){
  if(e.key == "ArrowUp"){
    e.preventDefault();
    let value = +this.value;
    this.value = value + increment;
  } else if(e.key == "ArrowDown"){
    e.preventDefault();
    let value = +this.value;
    this.value = value - increment;
  }
}
input:valid {
  border-color: #0f0;
}
input:invalid {
  border-color: #f00;
}
input {
  outline: none;
}
Enter a (non-negative) number:
<input type="text" pattern="\d*[.]*\d{0,3}" id="addNum">

本文标签： javascriptIncrement HTML5 Number Field by 5 with step of 01Stack Overflow

版权声明：本文标题：javascript - Increment HTML5 Number Field by .5 with step of .01 - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744095809a2532877.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。