escjs監聽

㈠ js錛孷ue2錛屼簨浠跺勭悊錛岃＄畻灞炴э紝鐩戣嗗睘鎬э紝class涓巗tyle緇戝畾

鐢╲-on鎸囦護鎴栬匑鐩戝惉DOM浜嬩歡錛屽苟鍦ㄨЕ鍙戞椂榪愯屼竴浜汮avaScript浠ｇ爜錛

鍙傝冿細JS錛孷ue2錛屼粙緇嶏紝涓嶸ue3鍖哄埆錛孧VVM璁捐℃ā寮忥紝妯℃澘璇娉曪紝鏁版嵁緇戝畾

Vue涓鐨勪簨浠朵慨楗扮︼細

1銆乸revent錛氶樆姝㈤粯璁や簨浠訛紙甯哥敤錛夛紱

2銆乻top錛氶樆姝浜嬩歡鍐掓場錛堝父鐢錛夛紱

3銆乷nce錛氫簨浠跺彧瑙﹀彂涓嬈★紙甯哥敤錛夛紱

4銆乧apture錛氫嬌鐢ㄤ簨浠剁殑鎹曡幏妯″紡錛

5銆乻elf錛氬彧鏈塭vent.target鏄褰撳墠鎿嶄綔鐨勫厓緔犳椂鎵嶈Е鍙戜簨浠訛紱

6銆乸assive錛氫簨浠剁殑榛樿よ屼負絝嬪嵆鎵ц岋紝鏃犻渶絳夊緟浜嬩歡鍥炶皟鎵ц屽畬姣曪紱

Vue涓甯哥敤鐨勬寜閿鍒鍚嶏細

鍥炶濺 => enter銆佸垹闄 => delete (鎹曡幏鈥滃垹闄も濆拰鈥滈鏍尖濋敭)銆侀鍑 => esc銆佺┖鏍 => space銆佹崲琛 => tab (鐗規畩錛屽繀欏婚厤鍚坘eydown鍘諱嬌鐢)銆佷笂 => up銆佷笅 => down銆佸乏 => left銆佸彸 => right絳夈

浠ｇ爜妗堜緥

妯℃澘鍐呯殑琛ㄨ揪寮忔槸闈炲父渚垮埄鐨勶紝鐢ㄤ簬綆鍗曠殑榪愮畻銆傚綋鍏惰繃闀挎垨閫昏緫榪囦簬澶嶆潅鏃訛紝浼氶毦浠ョ淮鎶わ紝鍥犳わ紝褰撻亣鍒板嶆潅鐨勯昏緫鏃跺簲璇ヤ嬌鐢ㄨ＄畻灞炴э紝鐢╟omputed璁＄畻灞炴с

浠ｇ爜妗堜緥

閫氳繃watch鏉ュ搷搴旀暟鎹鐨勫彉鍖栥

浠ｇ爜妗堜緥

class鏍峰紡錛屽啓娉:class="xxx" 錛屽叾涓瓁xx鍙浠ユ槸瀛楃︿覆銆佸硅薄銆佹暟緇勩

1銆佸瓧絎︿覆鍐欐硶閫傜敤浜庯細綾誨悕涓嶇『瀹氾紝瑕佸姩鎬佽幏鍙栥

2銆佸硅薄鍐欐硶閫傜敤浜庯細瑕佺粦瀹氬氫釜鏍峰紡錛屼釜鏁頒笉紜瀹氾紝鍚嶅瓧涔熶笉紜瀹氥

3銆佹暟緇勫啓娉曢傜敤浜庯細瑕佺粦瀹氬氫釜鏍峰紡錛屼釜鏁扮『瀹氾紝鍚嶅瓧涔熺『瀹氾紝浣嗕笉紜瀹氱敤涓嶇敤銆

style鏍峰紡錛屽啓娉曪細:style="{fontSize: xxx}"錛屽叾涓瓁xx鏄鍔ㄦ佸礆紱:style="[a,b]"鍏朵腑a銆乥鏄鏍峰紡瀵硅薄銆

浠ｇ爜妗堜緥

㈡ js實現設計一個對話框，並實現按ESC鍵和對話框關閉按鈕關閉「打開的對話框」

1. 使用eventListener監聽keydown事件，如果keycode為27，說明用戶按下了esc鍵，執行關閉操作。

2. 監聽按鈕click，如果被點擊執行關閉操作。

以上兩個操作可以共用一個關閉對話框的方法。

個人經驗，僅供參考，如果有幫助請採納，謝謝。

㈢ js按鍵執行 如何按enter 鍵 執行 js

$('demoBtn1').click();

㈣ 取消elementUI-Notification組件（$notify彈框）的esc按鍵關閉

項目中使用elementUI（v2.15.1）的Notification，改動樣式後作為浮窗，發現esc按鍵會將Notification關閉，需要取消esc的按鍵監聽。
查看element-ui/lib/notification.js發現組件mounted中有添加keydown事件監聽

參照beforeDestroy中的解綁，在notify創建後直接取消keydown監聽，之後按下esc鍵對應Notification不再關閉。

希望之後的版本有類似MessageBox的closeOnPressEscape配置。

㈤ 如何實時監聽 input 和 textarea輸入框值的變化

在實際前端開發中我們經常會遇到要實時監聽用戶的輸入，根據不同的輸入值來採取不同的措施。舉一個常見的例子：我們在使用Google 搜索框進行搜索時，每多輸入一個字，搜索框下方顯示的匹配結果會實時變化。這樣的效果就是通過實時監聽搜索框的輸入值變化從而提取不同的匹配結果來實現的。
那麼，一般使用最多的輸入框就是 input 和 textarea 了。要想實時監聽這兩種輸入框的值變化，就不得不提到鍵盤事件 key event 了。
鍵盤相關事件
onkeydown
onkeypress
onkeyup
oninput
onchange
onpropertychange
onkeydown/onkeypress/onkeyup
使用這三個事件監聽輸入框值變化，不能監聽到右鍵的復制、粘貼、剪切的操作。
onkeydown
按下鍵盤上的任意鍵（不包括PrScrn鍵）時觸發；如果一直按著鍵不放，則會一直觸發此事件。
onkeypress
按下鍵盤上的可顯示字元鍵（可以參考此文的鍵盤按鍵分類一節）時觸發，如果一直按著鍵不放，則會一直觸發此事件。
onkeyup
釋放鍵盤上的任意鍵（不包括PrScrn鍵）時觸發
1、是否可以捕獲組合鍵？
onkeydown/onkeyup可以捕獲組合鍵，onkeypress 只能捕獲單個字元。
在捕獲組合鍵時建議使用 onkeyup 事件。
2、是否區分大小寫字元？
onkeypress 能區分字元的大小寫，onkeydown/onkeyup不能區分。
3、是否區分主鍵盤和小鍵盤的數字？
onkeypress不區分主鍵盤和小鍵盤的數字，onkeydown/onkeyup則可以區分。
4、觸發順序
先 onkeydown, 再 onkeypress, 最後onkeyup
參考文檔
oninput/onpropertychange
上面講到用 keydown/keypress/keyup無法監聽右鍵粘貼復制操作，於是就有了 oninput 事件。
oninput是 HTML5的新事件，可以在輸入框（ textarea, input:text/password/search等）的value值發生變化時（通過 JS修改輸入值除外）立即觸發，所以可以監聽右鍵粘貼復制操作。但 IE9.0以下版本不支持，此時需要用到IE特有的 onpropertychange事件。在 Safari5.0以下版本，oninput 不支持 textarea 元素。
onpropertychange是 IE特有的事件，與 oninput不同的是，只要綁定對象的相關屬性（不單 value 值）發生變化（包括 通過JS腳本來修改）都會觸發此事件。
onchange
要觸發這個事件有2個必備條件：
1、和onpropertychange一樣，只要綁定對象的相關屬性發生了變化就會觸發此事件。但和onpropertychange不同，通過JS腳本改變屬性時無法觸發）；
2、輸入框失去焦點後觸發，所以無法做到實時監聽；
鍵盤按鍵分類
鍵盤上的每一個按鍵都對應唯一的 ASCII碼值，從這個角度理解其實每一個按鍵都是字元鍵。但這些按鍵可以分為2類： ASCII碼控制字元鍵和 ASCII碼可顯示字元鍵。
ASCII碼控制字元鍵
控制字元鍵是不會產生我們能看到的字元的按鍵，這類控制字元鍵常見的有：F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開始鍵}和方向鍵。
常見控制字元鍵對應的 ASCII碼見下：
ESC鍵 VK_ESCAPE (27)
回車鍵： VK_RETURN (13)
TAB鍵： VK_TAB (9)
Caps Lock鍵： VK_CAPITAL (20)
Shift鍵： VK_SHIFT ($10)
Ctrl鍵： VK_CONTROL (17)
Alt鍵： VK_MENU (18)
空格鍵： VK_SPACE (32)
退格鍵： VK_BACK (8)
左徽標鍵： VK_LWIN (91)
右徽標鍵： VK_LWIN (92)
滑鼠右鍵快捷鍵：VK_APPS (93)
Insert鍵： VK_INSERT (45)
Home鍵： VK_HOME (36)
Page Up： VK_PRIOR (33)
PageDown： VK_NEXT (34)
End鍵： VK_END (35)
Delete鍵： VK_DELETE (46)
方向鍵(←)： VK_LEFT (37)
方向鍵(↑)： VK_UP (38)
方向鍵(→)： VK_RIGHT (39)
方向鍵(↓)： VK_DOWN (40)
F1鍵： VK_F1 (112)
F2鍵： VK_F2 (113)
F3鍵： VK_F3 (114)
F4鍵： VK_F4 (115)
F5鍵： VK_F5 (116)
F6鍵： VK_F6 (117)
F7鍵： VK_F7 (118)
F8鍵： VK_F8 (119)
F9鍵： VK_F9 (120)
F10鍵： VK_F10 (121)
F11鍵： VK_F11 (122)
F12鍵： VK_F12 (123)
ASCII碼可顯示字元鍵
可顯示字元鍵是會產生我們能看到的字元的按鍵，這類按鍵常見得有：數字（包括 shift+數字）、字母（大小寫）、小鍵盤。
常用可顯示字元鍵ASCII碼如下：
65 A 鍵
66 B 鍵
67 C 鍵
68 D 鍵
69 E 鍵
70 F 鍵
71 G 鍵
72 H 鍵
73 I 鍵
74 J 鍵
75 K 鍵
76 L 鍵
77 M 鍵
78 N 鍵
79 O 鍵
80 P 鍵
81 Q 鍵
82 R 鍵
83 S 鍵
84 T 鍵
85 U 鍵
86 V 鍵
87 W 鍵
88 X 鍵
89 Y 鍵
90 Z 鍵
鍵盤按鍵 ASCII 碼對應表

㈥ JS彈出DIV窗口,按ESC取消

顯示層：

css：
.showdiv
{
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
z-index: 999;
display: none;
}
.count_div
{
width: 500px;
height: 400px;
margin-top: 120px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
border: 1px solid #aaaaaa;
background: #fff;
}
.brg
{
width: 100%;
background: #ededed;
position: absolute;
top: 0;
left: 0;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 998;
}

js:
function close () {
$("#brg").css("display", "none");
$("#showdiv").css("display", "none");
}
function show() {
$("#brg").css("display", "none");
$("#div_show").css("display", "none");
}
$(document).bind('keydown', 'esc',function (evt){
//關閉層代碼
close () ;
return false; });

html：
<!--遮罩層-->
<div class="brg" id="brg">
</div>
<!--顯示層-->
<div class="showdiv" id="div_order">
<div class="count_div" id="div_order_count">
內容
</div>
</div>
在網上找一個「jquery.hotkeys.js」的js包，裡面都是jquery整理好的熱鍵，
引入jquery包。
$(document).bind('keydown', 'esc',function (evt){
//關閉層代碼
return false; });
手敲，未測試，應該不會有太大問題，根據自己內容修改

㈦ 用js怎麼寫一個回車鍵盤事件

<script type="text/javascript" language=JavaScript charset="UTF-8">

document.onkeydown=function(event){

var e = event || window.event || arguments.callee.caller.arguments[0];

if(e && e.keyCode==27){ // 按 Esc

//要做的事情

}

if(e && e.keyCode==113){ // 按 F2

//要做的事情

}

if(e && e.keyCode==13){ // enter 鍵

//要做的事情

}

};

</script>

(7)escjs監聽擴展閱讀：

Js鍵盤事件

keydown：按鍵按下

keyup：按鍵抬起

keypress：按鍵按下抬起

<body>

<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">

</body>

<script>

/*輸出輸入的字元*/

function myKeyDown(id) {

console.log(document.getElementById(id).value);

}

/*按鍵結束，字體轉換為大寫*/

function myKeyUp(id) {

var text = document.getElementById(id).value;

document.getElementById(id).value = text.toUpperCase();

}

</script>

常用的鍵盤事件對應的鍵碼：

keyCode 8 = BackSpace BackSpace

keyCode 9 = Tab Tab

keyCode 12 = Clear

keyCode 13 = Enter

keyCode 16 = Shift_L

keyCode 17 = Control_L

keyCode 18 = Alt_L

keyCode 19 = Pause

keyCode 20 = Caps_Lock

keyCode 27 = Escape Escape