解決jequry使用keydown無法跳轉的問題

WindSpirit發表於2018-01-21

0x00 問題描述

程式碼

<script>
    $("document").ready(function() {
        $("#button").click(function() {
            $val = $("#input").val();
            window.location.href = 'http://www.baidu.com/s?wd=' + $val;
        })

        $("#input").keydown(function(event) {
            var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
            if (keyCode == "13") {
            $val = $("#input").val();
            window.location.href = 'http://www.baidu.com/s?word=' + $val;
        }
    })
})
</script>

實現功能

在搜尋框中輸入問題，通過點選按鈕和按下回車都可以跳轉到百度搜尋相應問題

主要問題

按下Enter鍵，先可以在控制檯裡看到先跳轉到百度搜尋介面，但一瞬間又跳回到當前頁面

0x02 解決方案

將keydown換成keyup

原理剖析

在jquery中按下按鍵(keypress)分為兩部分：keydown和keyup，而在獲取input值的時候是在keydown，也就是按鍵按下之後才開始獲取，所以把跳轉寫在keydown中無法獲取到input的值

相關文章