Javascript???jquery??????--????????????KeyboardEvent

Posted 2021-02-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript???jquery??????--????????????KeyboardEvent相关的知识，希望对你有一定的参考价值。

?????????hand add ?????? utf-8 input ?????? pre ???????????? ??????

Js???jq?????????????????????KeyboardEvent

????????????keydown???keypress???keyup???????????????????????????????????????textInput???

keydown???keypress???keyup?????????js???jq???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

???????????????????????????????????????????????????keydown???keypress?????????????????????????????????????????????????????????????????????????????????????????????keyup???????????????????????????????????????????????????????????????????????????????????????keyup???????????????????????????

??????ctrl??????shift??????alt??????meta???????????????????????????????????????altKey, ctrlKey, metaKey, shiftKey??????????????????????????????keypress???????????????????????????????????????????????????????????????????????????keydown??????keyup?????????????????????????????????

??????Shift-Process(?????????keydown?????????)/Shift???Ctrol???Control/Control???Alt???Alt/Alt???

???????????????????????????????????????????????????????????????

??????key????????????????????????a,b,c,d,e

??????keyCode?????????????????????keyup???keydown???????????????????????????a-65,b-66....??????keypress?????????????????????ascii???????????????0

??????charCode?????????????????????keyup???keydown??????????????????0??????keypress???????????????ascii???

??????which???keyup???keydown???????????????????????????a-65,b-66....??????keypress???????????????ascii???

??????altKey, ctrlKey, metaKey, shiftKey

<!DOCTYPE html>  
<html lang="zh-cn">  
    <head>  
        <meta charset="UTF-8"/>  
        <script src=???js/jquery-3.3.1.min.js???></script>
        <style>
            
        </style>
    </head>  
    <body> 
        <input type=???text??? id="c1"></input>
        <input type=???text??? id="c2"></input>
        
        <script type="text/javascript"> 
            //********?????????????????????
            function showit(e){
                var e = e||window.event||event;
                //console.log(e);

                console.log(e.type);
                console.log(e.key);//??????a???b
                console.log(e.keyCode);//???keyup???keydown???????????????????????????a-65,b-66....??????keypress?????????????????????ascii???????????????0
                console.log(e.charCode);//???keyup???keydown??????????????????0??????keypress???????????????ascii???
                console.log(e.which);//???keyup???keydown???????????????????????????a-65,b-66....??????keypress???????????????ascii???
                
                
            }
            //********js
            document.getElementById(???c1???).onkeypress=showit;
            document.getElementById(???c1???).addEventListener(???keyup???,showit);
            document.getElementById(???c1???).addEventListener(???keydown???,showit);    
            //*********jquery
            $(???#c2???).keypress(showit);
            $(???#c2???).on(???keydown???,showit);
            $(???#c2???).keyup(showit);

        
        </script>  
    </body>  
</html>

textInput?????????DOM3?????????

??????????????????????????????????????????????????????????????????????????????

??????textInput????????????keypress??????????????????

????????????????????????????????????????????????????????????keypress?????????????????????????????????????????????textInput?????????

????????????textInput??????????????????????????????????????????????????????????????????????????????keypress?????????????????????????????????????????????????????????????????????????????????????????????

??????data??????

????????????textInput?????????????????????????????????????????????event????????????????????????data?????????data??????????????????????????????

??????????????????S??????data????????????s???

????????????????????????????????????S??????data?????????"S"

EventUtil.addHandler(textbox,"textInput",function(event){

    event=EventUtil.getEvent(event);

    console.log(event.data);

});

inputMethod??????

???????????????event?????????????????????????????????inputMethod?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

????????????0?????????????????????????????????????????????

????????????1?????????????????????????????????

????????????2?????????????????????????????????

????????????3?????????????????????????????????

????????????4????????????????????????IME?????????

????????????5????????????????????????????????????????????????????????????

????????????6??????????????????????????????????????????????????????????????????

????????????7???????????????????????????????????????

????????????8???????????????????????????????????????????????????

????????????9???????????????????????????????????????

??????????????????textInput?????????????????????IE9+???Safari???Chrome?????????IE??????inputMethod?????????

?????????