input輸入框如何只能輸入非零開頭的正整數
********* 廢話不多說，先來代碼 *********
case1: 原生html + javascript
<body>
<!-- html代碼 -->
<div id="box">請輸入銷量：
<input class="input_value" />
</div>
<!-- js腳本引入 -->
<script type="text/javascript">
// step1: 獲取元素
var obj = document.querySelector("#box .input_value");
// step2: 添加事件
obj.oninput = function() {
var _this = this; // 為防止this指向改變
var reg = isNaN(_this.value); // 驗證this.value是否為數字
if (reg) { // 如果this.value不為數字，則reg為true
_this.value = _this.value.replace(/[^1-9]*$/g, '')
}
if (_this.value === '0') { // 此步想“ 阻止 ”用戶輸入的首個數字為0
_this.value = _this.value.replace(/^[^1-9]/g, '')
}
}
</script>
</body>
case2: vue + element-ui
<template>
<el-input v-model="price" @input.native="number($event)" placeholder="請輸入"></el-input>
<!-- 此處使用.native的原因：因為keyup是原生js提供的鍵盤事件，但是現在我使用的是element-ui框架，elementUi上面的input組件監聽事件是沒有這個事件的，所以我們需要加個vue事件的修飾符 .native，代表原生事件的意思。 -->
</template>
<script>
export default {
data() {
return {
price: ''
};
},
methods: {
number (e) {
var _value = e.target.value; // 獲取到輸入框的value值
const reg = isNaN(_value); // 判斷拿到的value是否為數字
if (reg) { // 若為非數字鍵，則全部替換為空
e.target.value = _value.replace(/[^1-9]/g, '');
}
if (_value === '0') { // 若為0，則替換為空
e.target.value = _value.replace(/^[^1-9]/g, '')
}
}
}
}
</script>
經驗分享：
大學畢業自學前端，剛入職場不到兩個月。這兩天手頭上的項目有一個需求是：input輸入框如何只能輸入非零開頭的正整數，在用戶輸入的過程中，如果輸入的東西不滿足條件的話，則不會同步顯示在輸入框內。
- 一開始，我考慮使用鍵盤事件onkeyup來完成我的需求，在用戶釋放鍵盤上的字符鍵的時候keyup事件被觸發，就會捕捉到用戶輸入的東西，並用正則檢測是否為非數字的東西。很xi顯然，我的第一個ideal失敗了，因為keyup是在字符鍵被釋放的時候觸發的，所以我的input輸入框中間肯定會有我輸入的不符合要求的東西。
<template>
<el-input v-model="price" @keyup.native = "value=value.replace(/[^\d]/g,'')" placeholder="請輸入"></el-input>
</template>
- 接下來，我轉向了onkeydown事件，因為keydown事件是在用戶按下鍵盤上的任意鍵時觸發，我的思路是，我只要我想要的鍵盤上的任意鍵起作用，其他的按鍵全部禁用就可以了。於是我找到了每一個鍵的keycode，只保留了我想要的按鍵，其他的全部禁用。經過幾次測試，我發現只有在英文輸入法狀態下我的代碼才奏效，在中文輸入法狀態下絲毫不起作用，此時我的思路發生了轉變，我開始研究其他的事件。
<template>
<el-input v-model="price" @keydown.native = "number($event)" placeholder="請輸入"></el-input>
</template>
<script>
export default {
data() {
return {
price: ''
};
},
methods: {
number (e) {
var keyCode = event.keyCode; // 獲取到觸發keydown事件的鍵盤任意鍵的keycode
if (keyCode >= 48 && keyCode <= 57) { // 如果keycode編碼在數字鍵的范圍內，就不禁用該按鍵
event.returnValue = true
} else if (keyCode >= 96 && keyCode <= 105) { // 如果keycode編碼在數字鍵的范圍內，就不禁用該按鍵
event.returnValue = true
} else if (keyCode === 8) { // keycode:8是按鍵Backspace的碼
event.returnValue = true
} else { // 如果keycode編碼不在數字鍵的范圍內，就禁用該按鍵
event.returnValue = false
// event.preventDefault() // 此處event.returnValue = false等同於event.preventDefault()
}
}
}
}
</script>
- onChange事件：使用 onchange 事件，在輸入內容后，只有 input 喪失焦點時才會得到結果，並不能在輸入時就做出響應。所以又被pass了。
<template>
<el-input v-model="price" @change.native = "value=value.replace(/[^\d]/g,'')" placeholder="請輸入"></el-input>
</template>
- onFocus事件：使用 onfocus 事件，在獲得焦點的那一刻，才會觸發該事件，接着輸入東西，並不能觸發該事件，不能在輸入時就做出響應。所以又被pass了。
- onInput事件：使用oninput事件，完美解決了以上種種問題。oninput可以實時監聽到用戶輸入的東西，對於那些非數字的，就可以使用正則找到並且替換為空，那么不管在中文狀態下，還是英文狀態下，都生效。
相關事件總結
| 事件名稱(Event Name) | 事件描述(Event Des) |
|---|---|
| keyup | 當用戶釋放鍵盤上的字符鍵時觸發 |
| keydown | 當用戶按下鍵盤上的任意鍵時觸發，如果按住不放的話，會重復觸發此事件 |
| keypress | 當用戶按下鍵盤上的字符鍵時觸發，如果按住不放的話，會重復觸發此事件 |
| change | 在內容改變（兩次內容有可能還是相等的）且失去焦點時觸發 |
| focus | 在對象獲得焦點時發生 |
| input | 在用戶輸入時立即觸發 |
- 字符鍵：能打出字符的就是字符鍵,如1,a,空格,回車,數字(注意：包括Shift+數字的符號)、字母（注意：包括大小寫）、小鍵盤
- 非字符鍵：打不出字的就不是字符鍵,如F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開始鍵}和方向鍵