一个数字输入框

发表于 | 分类于 |

看起来是个简单的问题，可越是简单的问题处理起来越复杂。简单问题复杂化？

使用 html5 input 新熟悉 number

看起来还不错，就是右侧上下箭头有点讨厌。

1
2
3
4
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

这样就好多了，但是小数点开头对普通使用者不太友好。如果是小数点开头就补个零吧。

1
2
3
4
5
6
7
8
9
10
var input = document.querySelector("input");
input.addEventListener("input", function (e) {
	var now = e.data;
	var val = e.target.value;
	if (val.indexOf(".") === 0) {
		input.value = "0" + val;
	} else if (now === "." && val === "") {
		input.value = "0.";
	}
});

哎呀！当第一位是小数点的时候控制台出现了这个：

The specified value “0.” cannot be parsed, or is out of range.

看起来使用 input[type=number] 无法满足这个需求了，那就只有另辟蹊径使用 input[type=input]来模拟一个数字输入框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var oldVal = "";
var input = document.querySelector("input");
input.addEventListener("input", function (e) {
	var now = e.data;
	var val = e.target.value;
	if (/[0-9\.]/.test(now) || e.target.value.match(/\./g).length > 1) {
		input.value = oldVal;
		return;
	}
	if (val.indexOf(".") === 0) {
		input.value = oldVal = "0" + val;
	} else if (now === "." && val === "") {
		input.value = oldVal = "0.";
	}
});
input.addEventListener("paste", function (e) {
	if (isNaN(Number(e.target.value))) {
		input.value = "";
	}
	oldVal = input.value;
});

[越努力，越幸运！]