onKeyPress onKeyUp และ onKeyDown

ความแตกต่างระหว่างสามเหตุการณ์นี้คืออะไร? เมื่อ googling ฉันพบว่า:

• onKeyDownเหตุการณ์จะถูกเรียกเมื่อผู้ใช้กดปุ่ม
• onKeyUpเหตุการณ์จะถูกเรียกเมื่อผู้ใช้ออกที่สำคัญ
• onKeyPressเหตุการณ์จะถูกเรียกเมื่อผู้ใช้กดและเผยแพร่คีย์ ( onKeyDownตามonKeyUp)

ฉันเข้าใจสองคนแรก แต่ไม่onKeyPressเหมือนกันonKeyUpหรือ เป็นไปได้ไหมที่จะปล่อยกุญแจ ( onKeyUp) โดยไม่ต้องกดมัน ( onKeyDown)?

นี่เป็นเรื่องที่ค่อนข้างสับสนใครบางคนช่วยเคลียร์สิ่งนี้ให้ฉันได้ไหม

ตรวจสอบที่นี่สำหรับลิงก์ที่เก็บถาวรที่ใช้ในคำตอบนี้

จากลิงค์นั้น:

ในทางทฤษฎีแล้วเหตุการณ์onKeyDownและonKeyUpเป็นตัวแทนของกุญแจที่ถูกกดหรือปล่อยออกมาในขณะที่onKeyPressเหตุการณ์นั้นหมายถึงตัวละครที่ถูกพิมพ์ การนำทฤษฎีไปใช้นั้นไม่เหมือนกันในทุกเบราว์เซอร์

KeyPress, KeyUpและKeyDownมีความคล้ายคลึงกับการตามลำดับ: Click, และMouseUp,MouseDown

1. Down เกิดขึ้นก่อน
2. Press เกิดขึ้นที่สอง (เมื่อป้อนข้อความ)
3. Up เกิดขึ้นครั้งสุดท้าย (เมื่อป้อนข้อความเสร็จสมบูรณ์)

ข้อยกเว้นคือwebkitซึ่งมีเหตุการณ์เพิ่มเติมภายใน:

keydown
keypress
textInput     
keyup

ด้านล่างนี้เป็นตัวอย่างข้อมูลที่คุณสามารถใช้ดูด้วยตัวคุณเองเมื่อเหตุการณ์ถูกไล่ออก:

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

คำตอบส่วนใหญ่ที่นี่เน้นทฤษฎีมากกว่าเรื่องเชิงปฏิบัติและมีความแตกต่างระหว่างkeyupและkeypressเกี่ยวข้องกับค่าของฟิลด์อินพุตอย่างน้อยใน Firefox (ทดสอบใน 43)

หากผู้ใช้พิมพ์1ลงในองค์ประกอบการป้อนข้อมูลที่ว่างเปล่า:

1. ค่าขององค์ประกอบอินพุตจะเป็นสตริงว่าง (ค่าเก่า) ภายในkeypressตัวจัดการ

2. ค่าขององค์ประกอบอินพุตจะเป็น1(ค่าใหม่) ภายในkeyupตัวจัดการ

สิ่งนี้มีความสำคัญอย่างยิ่งหากคุณกำลังทำบางสิ่งที่ต้องอาศัยการรับรู้คุณค่าใหม่หลังจากอินพุตแทนที่จะเป็นค่าปัจจุบันเช่นการตรวจสอบความถูกต้องแบบอินไลน์หรือการแท็บอัตโนมัติ

สถานการณ์:

1. ผู้ใช้พิมพ์12345ลงในองค์ประกอบการป้อนข้อมูล
2. 12345ผู้ใช้เลือกข้อความ
3. Aประเภทผู้ใช้ตัวอักษร

เมื่อkeypressเหตุการณ์ fires หลังจากป้อนตัวอักษรA, Aกล่องข้อความในขณะนี้มีเพียงตัวอักษร

แต่:

1. Field.val () 12345เป็น
2. $ Field.val (). ความยาวคือ 5
3. การเลือกผู้ใช้เป็นสตริงว่าง (ป้องกันไม่ให้คุณพิจารณาสิ่งที่ถูกลบโดยการเขียนทับการเลือก)

ดังนั้นจึงดูเหมือนว่าเบราว์เซอร์ (Firefox 43) ลบตัวเลือกของผู้ใช้แล้วไฟkeypressเหตุการณ์แล้วปรับปรุงเนื้อหาฟิลด์แล้วkeyupเกิดเพลิงไหม้

onkeydownถูกใช้เมื่อคีย์หยุดทำงาน (เช่นในช็อตคัตตัวอย่างเช่น in Ctrl+A, Ctrlถูกพักไว้ 'down'

onkeyup จะทำงานเมื่อปล่อยปุ่ม (รวมถึงตัวดัดแปลง / แป้น ฯลฯ )

onkeypressถูกรวมเป็นonkeydownและและonkeyupหรือขึ้นอยู่กับการทำซ้ำของแป้นพิมพ์ (เมื่อonkeyupไม่ได้ถูกไล่ออก) (พฤติกรรมการทำซ้ำนี้เป็นสิ่งที่ฉันไม่ได้ทดสอบถ้าคุณทำการทดสอบเพิ่มความคิดเห็น!)

textInput(webkit เท่านั้น) ถูกไล่ออกเมื่อป้อนข้อความบางส่วน (เช่นShift+Aจะป้อนตัวพิมพ์ใหญ่ 'A' แต่Ctrl+Aจะเลือกข้อความและไม่ป้อนข้อความใด ๆ ในกรณีนั้นเหตุการณ์อื่น ๆ ทั้งหมดจะเริ่มทำงาน)

ครั้งแรกพวกเขามีความหมายที่แตกต่าง: พวกเขายิง:

• KeyDown - เมื่อคีย์ถูกกด
• KeyUp - เมื่อมีการปล่อยปุ่มและหลังจากที่มีการอัปเดตค่าอินพุต / textarea (หนึ่งในนั้นเท่านั้น)
• KeyPress - ระหว่างปุ่มเหล่านั้นและไม่ได้หมายความว่ามีการกดและปล่อยคีย์ (ดูด้านล่าง)

ประการที่สองคีย์บางไฟบางส่วนของเหตุการณ์เหล่านี้และไม่ได้เกิดไฟไหม้คนอื่น ๆ ตัวอย่างเช่น

• ละเว้น KeyPress deleteลูกศรPgUp/ PgDn, home/ end, ctrl, alt, shiftฯลฯ ในขณะที่ KeyDown และ KeyUp ไม่ได้ (ดูรายละเอียดเกี่ยวกับescด้านล่าง);
• เมื่อคุณสลับหน้าต่างผ่านทางalt+ tabใน Windows มีเพียง KeyDown สำหรับการaltเกิดเพลิงไหม้เนื่องจากการสลับหน้าต่างเกิดขึ้นก่อนเหตุการณ์อื่น ๆ (และ KeyDown tabถูกป้องกันโดยระบบฉันคิดว่าอย่างน้อยก็ใน Chrome 71)

นอกจากนี้คุณควรทราบว่าevent.keyCode(และevent.which) มักจะมีค่าเดียวกันสำหรับ KeyDown และ KeyUp แต่ต่างกันสำหรับ KeyPress ลองสนามเด็กเล่นที่ฉันสร้างขึ้น โดยวิธีการที่ฉันได้สังเกตเห็นการเล่นโวหาร: ใน Chrome เมื่อฉันกดctrl+ aและinput/ textareaว่างเปล่าสำหรับ KeyPress ไฟด้วยevent.keyCode(และevent.which) เท่ากับ1! (เมื่ออินพุตไม่ว่างเปล่าจะไม่ทำงานเลย)

ในที่สุดก็มีวิธีปฏิบัติบางอย่าง:

• สำหรับการจัดการลูกศรคุณอาจต้องใช้ onKeyDown: หากผู้ใช้ถือ↓KeyDown จะยิงหลายครั้ง (ในขณะที่ KeyUp ยิงเพียงครั้งเดียวเมื่อปล่อยปุ่ม) นอกจากนี้ในบางกรณีคุณสามารถป้องกันการแพร่กระจายของ KeyDown ได้อย่างง่ายดาย แต่ไม่สามารถ (หรือไม่สามารถทำได้อย่างง่ายดาย) ป้องกันการแพร่กระจายของ KeyUp (ตัวอย่างเช่นถ้าคุณต้องการส่งเมื่อป้อนโดยไม่ต้องเพิ่มบรรทัดใหม่ลงในฟิลด์ข้อความ)
• อย่างน่าประหลาดใจเมื่อคุณถือกุญแจพูดtextareaทั้ง KeyPress และ KeyDown เริ่มทำงานหลายครั้ง (Chrome 71) ฉันจะใช้ KeyDown ถ้าฉันต้องการเหตุการณ์ที่ยิงหลายครั้งและ KeyUp สำหรับการปล่อยปุ่มเดียว
• KeyDown มักจะดีกว่าสำหรับเกมเมื่อคุณต้องตอบสนองต่อการกระทำของพวกเขาได้ดีขึ้น
• escมักจะถูกประมวลผลผ่าน KeyDown: KeyPress ไม่ทำงานและ KeyUp จะทำงานต่างกันสำหรับinputs และtextareas ในเบราว์เซอร์ที่แตกต่างกัน (ส่วนใหญ่เกิดจากการสูญเสียการโฟกัส)
• หากคุณต้องการปรับความสูงของพื้นที่ข้อความกับเนื้อหาคุณอาจจะไม่ใช้ onKeyDown แต่จะเป็น onKeyPress ( PS ok จริง ๆ แล้วควรใช้ onChange สำหรับกรณีนี้ )

ฉันใช้ทั้ง 3 ในโครงการของฉัน แต่น่าเสียดายที่อาจลืมวิธีปฏิบัติบางอย่างไป (ข้อสังเกต: ยังมีinputและchangeกิจกรรม)

นี้บทความโดยแจ Wolter เป็นชิ้นที่ดีที่สุดที่ฉันได้มาข้ามคุณสามารถหาสำเนาที่บันทึกไว้ที่นี่หากลิงก์ตาย

มันอธิบายเหตุการณ์คีย์เบราว์เซอร์ทั้งหมดได้ดีจริงๆ

KeyDownเหตุการณ์เกิดขึ้นเมื่อคีย์ถูกกดตามทันทีโดยเหตุการณ์ปุ่มกด จากนั้นkeyupเหตุการณ์ถูกสร้างขึ้นเมื่อกุญแจสำคัญที่จะถูกปล่อยออก

เพื่อให้เข้าใจถึงความแตกต่างระหว่างkeydownและปุ่มกดจะเป็นประโยชน์ที่จะแยกแยะระหว่างตัวละครและกุญแจ สำคัญเป็นปุ่มทางกายภาพบนแป้นพิมพ์ของคอมพิวเตอร์ ตัวละครที่เป็นสัญลักษณ์พิมพ์โดยการกดปุ่ม บนคีย์บอร์ดของสหรัฐอเมริกาการกดปุ่มใน4ขณะที่กดShiftแป้นค้างไว้มักจะสร้างอักขระ "เครื่องหมายดอลลาร์" นี่ไม่ได้เป็นอย่างนั้นกับทุก ๆ คีย์บอร์ดในโลก ในทางทฤษฎีเหตุการณ์keydownและkeyup จะเป็นตัวแทนของปุ่มที่ถูกกดหรือปล่อยออกมาขณะที่keypressเหตุการณ์แสดงถึงตัวละครที่ถูกพิมพ์ ในทางปฏิบัติสิ่งนี้ไม่ได้เป็นวิธีที่นำไปใช้เสมอ

ในขณะที่บาง browers ยิงเหตุการณ์เพิ่มเติมที่เรียกว่าtextInputทันทีหลังจากกดปุ่ม เวอร์ชันก่อนหน้าของมาตรฐาน DOM 3 ตั้งใจให้ใช้สิ่งนี้แทนการจัดกิจกรรมkeypressแต่ความคิดทั้งหมดถูกเพิกถอนในภายหลัง Webkit สนับสนุนนี้ระหว่างรุ่น 525 และ 533 และฉันบอกว่าสนับสนุนการใช้ IE มัน แต่ฉันไม่เคยตรวจพบว่าอาจจะเป็นเพราะ Webkit มันจะต้องถูกเรียกtextInputขณะที่ IE เรียกมันว่าtextinput

นอกจากนี้ยังมีเหตุการณ์ที่เรียกว่าอินพุตสนับสนุนโดยเบราว์เซอร์ทั้งหมดซึ่งเริ่มทำงานหลังจากมีการเปลี่ยนแปลงไปยังฟิลด์ข้อความหรืออินพุต โดยปกติแล้วปุ่มกดจะเริ่มทำงานจากนั้นอักขระที่พิมพ์จะปรากฏในพื้นที่ข้อความจากนั้นอินพุตจะเริ่มทำงาน ป้อนข้อมูลเหตุการณ์ที่ไม่จริงให้ข้อมูลใด ๆ เกี่ยวกับสิ่งที่สำคัญถูกพิมพ์ - คุณจะต้องตรวจสอบช่องที่จะคิดออกว่ามีอะไรเปลี่ยนแปลง - ดังนั้นเราไม่ได้จริงๆคิดว่ามันเป็นเหตุการณ์ที่สำคัญและไม่ได้จริงๆเอกสารได้ที่นี่ . แม้ว่าในตอนแรกมันถูกกำหนดไว้สำหรับ textareas และกล่องอินพุตเท่านั้น แต่ฉันเชื่อว่ามีการเคลื่อนไหวบางอย่างที่ทำให้ภาพรวมของวัตถุชนิดอื่น ๆ

ดูเหมือนว่า onkeypress และ onkeydown ทำเช่นเดียวกัน (ซึ่งแตกต่างกันเล็กน้อยของปุ่มลัดที่ระบุไว้ข้างต้น)

คุณสามารถลองสิ่งนี้:

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

และคุณจะเห็นว่าเหตุการณ์ onkeypress และ onkeydown ถูกทริกเกอร์ในขณะที่กดปุ่มไม่ใช่เมื่อกดปุ่ม

ความแตกต่างคือเหตุการณ์จะถูกเรียกไม่ใช่ครั้งเดียว แต่หลายครั้ง (ตราบใดที่คุณกดปุ่มค้างไว้) ระวังและจัดการให้ดี

เหตุการณ์ onkeypress ใช้ได้กับปุ่มทั้งหมดยกเว้น ALT, CTRL, SHIFT, ESC ในเบราว์เซอร์ทั้งหมดที่เป็นเหตุการณ์ onkeydown ทำงานได้กับทุกปุ่ม หมายถึงเหตุการณ์ onkeydown จับกุญแจทั้งหมด

แค่อยากแบ่งปันความอยากรู้อยากเห็น:

เมื่อใช้เหตุการณ์ onkeydown เพื่อเปิดใช้งานวิธี JS รหัสสำหรับเหตุการณ์นั้นไม่เหมือนกับที่คุณได้รับจาก onkeypress!

เช่นปุ่ม numpad จะส่งคืน charcodes เดียวกันกับปุ่มตัวเลขด้านบนปุ่มตัวอักษรเมื่อใช้ onkeypress แต่ไม่ใช้เมื่อใช้ onkeydown!

ใช้เวลาสักครู่ในการคิดว่าทำไมสคริปต์ของฉันที่ตรวจสอบ Charcodes บางตัวล้มเหลวเมื่อใช้ onkeydown!

การสาธิต: https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK

และใช่. ฉันรู้ว่าคำจำกัดความของวิธีการนั้นแตกต่างกัน .. แต่สิ่งที่สับสนมากก็คือทั้งสองวิธีผลลัพธ์ของเหตุการณ์นั้นจะถูกดึงกลับมาโดยใช้ event.keyCode .. แต่พวกเขาไม่คืนค่าเดียวกัน .. การดำเนินการที่เปิดเผย

โดยทั่วไปเหตุการณ์เหล่านี้จะทำงานแตกต่างกันไปตามประเภทและรุ่นของเบราว์เซอร์ที่แตกต่างกันฉันสร้างการทดสอบ jsBin เล็กน้อยและคุณสามารถตรวจสอบคอนโซลเพื่อดูว่าเหตุการณ์เหล่านี้ทำงานอย่างไรกับสภาพแวดล้อมเป้าหมายของคุณหวังว่าความช่วยเหลือนี้ http://jsbin.com/zipivadu/10/edit

อัปเดตคำตอบ:

KeyDown

• ยิงหลาย ๆ ครั้งเมื่อคุณกดปุ่มค้างไว้
• ยิงคีย์เมตา

กดปุ่ม

• ยิงหลาย ๆ ครั้งเมื่อคุณกดปุ่มค้างไว้
• ไม่ได้ยิงคีย์ meta

KeyUp

• ยิงครั้งเดียวเมื่อสิ้นสุดเมื่อคุณปล่อยกุญแจ
• ยิงคีย์เมตา

นี่คือการทำงานทั้งในและaddEventListenerjQuery

https://jsbin.com/vebaholamu/1/edit?js,console,output <- ลองตัวอย่าง

(คำตอบได้รับการแก้ไขพร้อมคำตอบที่ถูกต้องภาพหน้าจอ & ตัวอย่าง)

ข้อเท็จจริงที่เป็นประโยชน์บางประการที่อาจเป็นประโยชน์ในการตัดสินใจว่าจะจัดการกับเหตุการณ์ใด (เรียกใช้สคริปต์ด้านล่างและมุ่งเน้นที่ช่องป้อนข้อมูล):

$('input').on('keyup keydown keypress',e=>console.log(e.type, e.keyCode, e.which, e.key))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>

กด:

• กุญแจไม่ใช่แทรก / การพิมพ์ (เช่นShift, Ctrl) keypressจะไม่เรียก กดCtrlแล้วปล่อย:

  keydown 17 17 การควบคุม

  keyup 17 17 การควบคุม

• กุญแจจากคีย์บอร์ดที่ใช้การแปลงตัวอักษรตัวละครอื่น ๆ อาจนำไปสู่การตายและทำซ้ำ "คีย์" (เช่น~, ´) keydownบน กด´และปล่อยเพื่อแสดงสองครั้ง´´:

  keydown 192 192 ตาย

  keydown 192 192´´

  ปุ่มกด 180 180 ´

  ปุ่มกด 180 180 ´

  keyup 192 192 ตาย

นอกจากนี้อินพุตที่ไม่มีการพิมพ์ (เช่นอยู่ในช่วง<input type="range">) จะยังคงทริกเกอร์เหตุการณ์การคีย์คีย์การกดคีย์และการกดคีย์ทั้งหมดตามปุ่มกด