動手寫個數字輸入框1：input[type=number]的遺憾

前言

 最近在用Polymer封裝純數字的輸入框，開發過程中發現不少坑，也有很多值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經歷：

1. 《動手寫個數字輸入框1：input[type=number]的遺憾》
2. 《動手寫個數字輸入框2：起手式——攔截非法字符》
3. 《動手寫個數字輸入框3：痛點——輸入法是個魔鬼》
4. 《動手寫個數字輸入框4：魔鬼在細節——打磨光標位置》

HTML5帶來的福利-input[type=number]

<input
	id="age" name="age"
	type="number" step="1" min="0" max="120">
<input
	id="inc"
	type="button" value="增加">
<input
	id="dec"
	type="button" value="減少">

<script>
	/* 工具函數...無視我吧:D */
	const comp =
		   (...fns) =>
		   (...args) => {
		     let len = fns.length
		     while (len--){
		       args = [fns[len].apply(null, args)]
		     }
		     return args.length > 1 ? args : args[0]
		   }
	const isSome = x => 'undefined' !== typeof x && x !== null
	const invokerImpl =
			n =>
        o =>
			m =>
			(...args) => {
			  let args4m = args.splice(0, n)
			    , times = parseInt(args[0]) || 1
			    , ret = []
			  while (times--){
			    ret.push(o[m].apply(o, args4m))
			  }
			  return ret.length > 1 ? ret : ret[0]
			}
	const curry2Partial =
		fn =>
		(...args) => {
			let c = true
				, i = 0
				, l = args.length
				, f = fn
			for (;c && i < l; ++i){
				c = isSome(args[i])
				if (c){
					f = f(args[i])
				}
			}
			return f
		}
	const invoker = curry2Partial(invokerImpl)
	const invoker0 = invoker(0)
	const $ = invoker(1, document, "querySelectorAll")
	const invoker0AtEl = comp(invoker0, $)

	/* 繼續無視我吧:D */
	const invoker0AtAge = invoker0AtEl('#age')

	// input[type=number]提供stepUp和stepDown兩個方法來增加和減少數字
	const incAge = invoker0AtAge('stepUp')
			, decAge = invoker0AtAge('stepDown')
	$('#inc').addEventListener('click', incAge)
	$('#dec').addEventListener('click', decAge)
</script>

 input[type=number]為我們提供了如下特性：

1. 限制只能輸入[+-0-9.]這幾個字符
2. 輸入法(IME)也無法輸入非[+-0-9.]的字符
3. 自動的表單驗證
4. min和max來限制數值的下限和上限;
5. 提供stepUp和stepDown兩個方法實現以編程方式控制數值的增加和減少;
6. 移動設備上當它獲得焦點時，會出現數字鍵盤;
7. step設置點擊右側微調按鈕的步長(默認為1)，可設置為小數、整數或any。step的值除了影響微調按鈕的步長外，還影響表單驗證信息。

<!-- step為整數時 -->
<input name="age1" type="number"
	step="1" value="1">
<input name="age1" type="number"
	step="1" value="1.1">

<!-- step為小數時 -->
<input name="age2" type="number"
	step="0.1" value="1">
<input name="age2" type="number"
	step="0.1" value="1.1">
<input name="age2" type="number"
	step="0.1" value="1.11">

<!-- step為any時 -->
<input name="age3" type="number"
	step="any" value="1">
<input name="age3" type="number"
	step="any" value="1.1">
<input name="age3" type="number"
	step="any" value="1.11">

<script>
  // 顯示 true false
	$('[name=age1]').forEach(el => console.log(el.validity.valid))
  // 顯示 true true false
	$('[name=age2]').forEach(el => console.log(el.validity.valid))
  // 顯示 true true true
	$('[name=age3]').forEach(el => console.log(el.validity.valid))
</script>

另外，設置為any是讓表單驗證不受精度限制而已，實際上步長依然為1。

遺憾了我的哥

 到這里我想大家都會發現怎么少了個精度設置呢？確實，input[type=number]並沒有為我們提供設置精度的屬性或方法。但遺憾的何止是這個呢？

1. 木有精度精度設置;
2. 不想要右側的微調按鈕還不行了...
3. 點擊微調按鈕和調用stepUp和stepDown設置數值確實被限制在min和max區間，但直接輸入卻不受限制...
4. 可以輸入多個小數點，如2012.12.12;
5. 設置step=any后，chrome on android的數字鍵盤居然沒了小數點按鍵。
6. 設置step=any后，點擊微調按鈕步長為1，但調用stepUp和stepDown則報

Uncaught DOMException: Failed to execute 'stepUp' on 'HTMLInputElement': This form element does not have an allowed value step.

隱藏右側微調按鈕不完全解決方法

Webkit和Gecko下可通過以下的CSS來隱藏右側微調按鈕

/* chrome */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
	-webkit-appearance: none!important;
	margin: 0;
}
/* Firefox */
input[type=number]{
	-moz-appearance: textfield;
}

IE就沒轍了:-(

總結

 也許你會問既然HTML5願意為我們新增一個全新的input[type=number]，為什么偏偏提供一個缺胳膊少腿的呢？只能說得哥情時失嫂意，既然它不滿足，那就自己寫寫看咯:)
尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/6918305.html ^_肥仔John