在眾多的 HTML 標籤中，有一些標籤是具有預設行為的，這裡簡單地列舉 3 個：
-
a 標籤，在單擊後預設行為會跳轉至 href 屬性指定的連結中。
-
核取方塊 checkbox，在單擊後預設行為是選中的效果。
-
輸入框 text，在獲取焦點後，鍵盤輸入的值會對應展示到 text 輸入框中。
在一般情況下我們是允許標籤的預設行為的，就像使用者的正常操作，但是在某些時候我們是需要阻止這些標籤的預設行為的，同樣使用上述 3 種場景作為說明：
-
a 標籤，假如 a 標籤上顯示的文案不符合預期，我們在單擊 a 標籤時將不會跳轉至對應的連結中去。
-
核取方塊 checkbox，假如已選中的核取方塊在單擊的時候不會被取消，依然是選中的狀態。
-
輸入框 text，假如我們限制使用者輸入的值只能是數位和大小寫字母，其他的值不允許輸入。
那麼該如何編寫程式碼來阻止元素的預設行為呢？
很簡單，就是通過 event.preventDefault() 函數去實現。為了更詳細地說明阻止預設行為的操作，我們選擇輸入框來做具體說明。
場景描述：限制使用者輸入的值只能是數位和大小寫字母，其他的值則不能輸入，如輸入其他值則給出提示資訊，提示資訊在兩秒後消失。
在本範例中，因為涉及鍵盤輸入，所以我們需要監聽 keypress 事件，通過相容性來處理獲取當前按鍵的值，然後判斷輸入的值是否合法，從而控制鍵盤輸入的行為。
在這裡我們需要掌握一些關於鍵盤按鍵值的知識點，其實就是鍵盤的每個鍵有對應的 Unicode 編碼。
本例需要獲取的數位和字母的 Unicode 編碼範圍如下所示：
-
數位的 Unicode 編碼範圍是 48～57。
-
大寫字母 A～Z 的 Unicode 編碼範圍是 65～90。
-
小寫字母 a～z 的 Unicode 編碼範圍是 97～122。
在瞭解了需要獲取的鍵的 Unicode 編碼範圍後，接下來要做的就是獲取這些 Unicode 編碼，並將其用在程式中作判斷。
同樣是因為瀏覽器的相容性問題，Event 物件提供了多種不同的屬性來獲取鍵的 Unicode 編碼，分別是 event.keyCode、event.charCode 和 event.which。
我們可以通過以下方式來做相容性處理：
var charCode = event.keyCode || event.which || event.charCode;
根據以上分析，最終所得的程式碼如下所示：
<input type="text" id="text">
<div id="tip"></div>
<script>
var text = document.querySelector('#text');
var tip = document.querySelector('#tip');
text.addEventListener('keypress', function (event) {
var charCode = event.keyCode || event.which || event.charCode;
// 滿足輸入數位
var numberFlag = charCode <= 57 && charCode >= 48;
// 滿足輸入大寫字母
var lowerFlag = charCode <= 90 && charCode >= 65;
// 滿足輸入小寫字母
var supperFlag = charCode <= 122 && charCode >= 97;
if (!numberFlag && !lowerFlag && !supperFlag) {
// 阻止預設行為，不允許輸入
event.preventDefault();
tip.innerText = '只允許輸入數位和大小寫字母';
}
// 設定定時器,清空提示語
setTimeout(function () {
tip.innerText = '';
}, 2000);
});
</script>
執行上面的程式碼，在頁面出現的 text 文字方塊中進行輸入，輸入 0～9 或大小寫字母時可以正常輸入，而輸入下畫線 （_）、加號 （+）等字元時是無法輸入的，同時文字方塊下會出現“只允許輸入數位和大小寫字母”的提示。