關於input type='number'去掉箭頭 且不能輸入e和標點符號

關於去掉箭頭 且不能輸入e和標點符號

• 1.input數字框去掉箭頭

由圖所示：數字框空間本來就很小,然後還被箭頭佔用;

由圖所示：數字框雖然css樣式設置居中對齊,但是由於被箭頭佔用,所以不能居中對齊顯示,不美觀;

由圖所示：數字框空間本來就很小,由於箭頭佔用,導致兩位數不能完全顯示.

結構代碼如下:

<input type="number" v-model="item5.OUTPUT" min="0" step="1" class="NUM-INPUT">

• 解決辦法:

更改input數字框的樣式,需要注意:有可能會涉及css樣式的權重問題;
我是在需要去除箭頭的html結構上添加類名NUM-INPUT

<input type="number" v-model="item5.OUTPUT" min="0" step="1" class="NUM-INPUT">

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

請看下圖改善後結果:

• 2.禁止輸入字母e和標點符號

現象描述如下圖:

爲什麼其他字母不能輸入,但是e可以輸入數字框呢?
原因是e在數學上代表一常量2.71828，所以它也還是一個數字,當然就可以輸入進去;
除此之外,還有+-*/.這些特殊的運算符號也能輸入數字框.
那如果我只想讓用戶輸入純數字,怎麼辦?

• 解決辦法1:

<input type="number" v-model="item5.OUTPUT" min="0" step="1" class="NUM-INPUT" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))">

這個方法只適用於輸入正整數

• 解決辦法2:

<input type="number" v-model="item5.OUTPUT" min="0" step="1" class="NUM-INPUT" oninput="this.value=this.value.replace(/[^0-9.]+/g,'');">

如果需要輸入小數可以把"."從正則表達式保留

其實方法還有很多,只要能夠解決問題就好~