เหตุการณ์คีย์จาวาสคริปต์ (เข้ากันได้กับทุกเบราว์เซอร์)

ส่วนที่ 1: เหตุการณ์สำคัญของเบราว์เซอร์

หากต้องการใช้การล็อกคีย์ด้วย js คุณต้องใส่ใจกับเหตุการณ์หลักสามประเภทของเบราว์เซอร์ ได้แก่ การกดคีย์ การกดคีย์ และคีย์อัพ ซึ่งสอดคล้องกับตัวจัดการเหตุการณ์ทั้งสามของ onkeydown, onkeypress และ onkeyup ตามลำดับ การกดปุ่มทั่วไปจะสร้างเหตุการณ์ทั้งสามเหตุการณ์ ตามลำดับการกดปุ่ม การกดปุ่ม และปุ่มกดเมื่อมีการปล่อยปุ่ม

ในบรรดาเหตุการณ์ทั้งสามประเภทนี้ การกดปุ่มและการกดปุ่มค่อนข้างต่ำ ในขณะที่การกดปุ่มค่อนข้างสูง สิ่งที่เรียกว่าขั้นสูงในที่นี้หมายความว่าเมื่อผู้ใช้กด shift + 1 การกดปุ่มจะแยกวิเคราะห์เหตุการณ์คีย์และส่งกลับอักขระ "!" ที่พิมพ์ได้ ในขณะที่การกดคีย์และคีย์อัพจะบันทึกเฉพาะเหตุการณ์ shift + 1 [1]

อย่างไรก็ตาม การกดปุ่มจะมีผลกับอักขระบางตัวที่สามารถพิมพ์ได้เท่านั้น สำหรับปุ่มฟังก์ชัน เช่น F1-F12, Backspace, Enter, Escape, PageUP, PageDown และทิศทางลูกศร เหตุการณ์การกดปุ่มจะไม่ถูกสร้างขึ้น แต่กดปุ่มลงและกดปุ่มลง สามารถสร้างเหตุการณ์ได้ อย่างไรก็ตาม ใน FireFox ปุ่มฟังก์ชันสามารถสร้างเหตุการณ์การกดปุ่มได้

ออบเจ็กต์เหตุการณ์ที่ส่งผ่านไปยังตัวจัดการเหตุการณ์การกดแป้น การกดแป้น และคีย์อัพ มีคุณสมบัติทั่วไปบางอย่าง หากกด Alt, Ctrl หรือ Shift พร้อมกันด้วยปุ่ม คุณสมบัตินี้จะแสดงด้วยคุณสมบัติ altKey, ctrlKey และ shiftKey ของเหตุการณ์ ซึ่งเป็นเรื่องปกติใน FireFox และ IE

ส่วนที่สอง: เบราว์เซอร์ที่เข้ากันได้

js ใด ๆ ที่เกี่ยวข้องกับเบราว์เซอร์จะต้องพิจารณาปัญหาความเข้ากันได้ของเบราว์เซอร์

ปัจจุบันเบราว์เซอร์ที่ใช้กันทั่วไปส่วนใหญ่จะใช้ IE และ Mozilla Maxthon ใช้เคอร์เนล IE ในขณะที่ FireFox และ Opera ใช้เคอร์เนล Mozilla

2.1 การเริ่มต้นเหตุการณ์

สิ่งแรกที่คุณต้องรู้คือวิธีเริ่มต้นเหตุการณ์ คำสั่งพื้นฐานมีดังนี้:

ฟังก์ชั่นคีย์ลง(){}

document.onkeydown = คีย์ดาวน์;

เมื่อเบราว์เซอร์อ่านคำสั่งนี้ มันจะเรียกใช้ฟังก์ชัน KeyDown() ไม่ว่าจะกดปุ่มใดบนคีย์บอร์ดก็ตาม

2.2 วิธีการปรับใช้ FireFox และ Opera

การใช้งานโปรแกรมต่างๆ เช่น FireFox และ Opera นั้นยุ่งยากกว่า IE ดังนั้นฉันจะอธิบายที่นี่ก่อน

ฟังก์ชัน keyDown() มีตัวแปรที่ซ่อนอยู่ โดยทั่วไปเราใช้ตัวอักษร "e" เพื่อแสดงตัวแปรนี้

ปุ่มฟังก์ชั่นลง(e)

ตัวแปร e แสดงถึงเหตุการณ์การกดแป้นพิมพ์ หากต้องการค้นหาคีย์ที่ถูกกด ให้ใช้แอ็ตทริบิวต์ which:

e.ซึ่ง

e.ซึ่งจะให้ค่าดัชนีของคีย์ วิธีการแปลงค่าดัชนีเป็นค่าตัวเลขและตัวอักษรของคีย์ต้องใช้ฟังก์ชันคงที่ String.fromCharCode() ดังนี้

String.fromCharCode(e.ซึ่ง)

เมื่อรวมข้อความข้างต้นเข้าด้วยกัน เราจะได้คีย์ที่กดใน FireFox:

คัดลอกรหัสรหัสดังต่อไปนี้:

ฟังก์ชั่นคีย์ลง (e) {

var keycode = e.ซึ่ง;

var realkey = String.fromCharCode(e.ซึ่ง);

alert("รหัสกุญแจ: " + รหัสกุญแจ + " ตัวอักษร: " + realkey);

-

document.onkeydown = คีย์ดาวน์;

2.3 วิธีการปรับใช้ IE

โปรแกรมของ IE ไม่จำเป็นต้องใช้ตัวแปร e ใช้ window.event.keyCode แทน e. ซึ่งวิธีการแปลงค่าดัชนีคีย์ให้เป็นค่าคีย์จริงจะคล้ายกัน: String.fromCharCode(event.keyCode) เป็นดังนี้:

คัดลอกรหัสรหัสดังต่อไปนี้:

ฟังก์ชั่นคีย์ลง() {

รหัส var = event.keyCode;

var realkey = String.fromCharCode (event.keyCode);

alert("รหัสกุญแจ: " + รหัสกุญแจ + " ตัวอักษร: " + realkey);

-

document.onkeydown = คีย์ดาวน์;

2.4 กำหนดประเภทเบราว์เซอร์

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

คัดลอกรหัสรหัสดังต่อไปนี้:

ฟังก์ชั่น keyUp (e) {

ถ้า (navigator.appName == "Microsoft Internet Explorer")

-

รหัส var = event.keyCode;

var realkey = String.fromCharCode (event.keyCode);

}อื่น

-

var keycode = e.ซึ่ง;

var realkey = String.fromCharCode(e.ซึ่ง);

-

alert("รหัสกุญแจ: " + รหัสกุญแจ + " ตัวอักษร: " + realkey);

-

document.onkeyup = คีย์อัพ;

วิธีที่ง่ายกว่าคือ [2]:

คัดลอกรหัสรหัสดังต่อไปนี้:

ฟังก์ชั่น keyUp (e) {

var currKey=0,e=e||เหตุการณ์;

currKey=e.keyCode||e.ซึ่ง||e.charCode;

var keyName = String.fromCharCode(currKey);

alert("รหัสคีย์: " + currKey + " ตัวละคร: " + ชื่อคีย์);

-

document.onkeyup = คีย์อัพ;

วิธีการข้างต้นฉลาดกว่า ให้ฉันอธิบายสั้น ๆ :

ก่อนอื่น โค้ด e=e||event; ความหมายของโค้ดนี้ใน js คือ ถ้ามีตัวแปรที่ซ่อนอยู่ e มีอยู่ใน FireFox หรือ Opera แล้ว e||event จะส่งคืน e หากไม่มีตัวแปรที่ซ่อนอยู่ e ใน IE กิจกรรมก็จะถูกส่งกลับ

ประการที่สอง currKey=e.keyCode | มีแอตทริบิวต์ which และ charCode ใน Opera และมี keyCode และคุณลักษณะใดบ้างใน Opera

รหัสข้างต้นเข้ากันได้กับเบราว์เซอร์เท่านั้น รับวัตถุเหตุการณ์ keyup และเพียงแสดงรหัสคีย์และอักขระของคีย์ อย่างไรก็ตาม ปัญหาเกิดขึ้นเมื่อคุณกดปุ่ม ปุ่มตัวอักษรจะเป็นตัวพิมพ์ใหญ่ทั้งหมดและเมื่อคุณ กดปุ่ม Shift ตัวอักษรจะแปลกๆ มาก ดังนั้นโค้ดจึงต้องปรับให้เหมาะสม

ส่วนที่ 3: การใช้งานโค้ดและการเพิ่มประสิทธิภาพ

3.1 รหัสคีย์และรหัสอักขระสำหรับเหตุการณ์สำคัญ

รหัสคีย์และรหัสอักขระของเหตุการณ์สำคัญขาดความสามารถในการพกพาระหว่างเบราว์เซอร์ สำหรับเบราว์เซอร์ที่แตกต่างกันและเหตุการณ์เคสที่แตกต่างกัน วิธีการจัดเก็บรหัสคีย์และรหัสอักขระจะแตกต่างกัน.....

ใน IE มีแอตทริบิวต์ keyCode เพียงรายการเดียวเท่านั้น และการตีความจะขึ้นอยู่กับประเภทของเหตุการณ์ สำหรับการกดคีย์ keyCode จะจัดเก็บรหัสคีย์ สำหรับเหตุการณ์การกดแป้น keyCode จะจัดเก็บรหัสอักขระ ไม่มีแอตทริบิวต์ which และ charCode ใน IE ดังนั้นแอตทริบิวต์ which และ charCode จึงไม่ได้ถูกกำหนดไว้เสมอ

รหัสคีย์ใน FireFox จะเป็น 0 เสมอ เมื่อถึงเวลากดลง/กดคีย์ charCode=0 ซึ่งเป็นรหัสคีย์ เมื่อเกิดการกดปุ่มเหตุการณ์ ค่าของ charCode และ charCode จะเหมือนกัน และโค้ดอักขระจะถูกจัดเก็บ

ใน Opera ค่าของ keyCode และค่าที่เหมือนกันเสมอ ในเหตุการณ์ keydown/keyup จะเก็บรหัสคีย์ไว้ ในเวลากดปุ่ม จะเก็บรหัสอักขระ และ charCode จะไม่ถูกกำหนดและไม่ได้กำหนดไว้เสมอ

3.2 ใช้การกดปุ่มลง/การกดปุ่มหรือการกดปุ่ม

ส่วนแรกได้แนะนำความแตกต่างระหว่างการกดปุ่มลง/การกดปุ่มและการกดปุ่ม มีกฎทั่วไปว่าเหตุการณ์การกดปุ่มมีประโยชน์มากที่สุดสำหรับปุ่มฟังก์ชัน ในขณะที่เหตุการณ์การกดปุ่มจะมีประโยชน์มากที่สุดสำหรับปุ่มที่สามารถพิมพ์ได้ [3]

การบันทึกแป้นพิมพ์มีไว้สำหรับอักขระที่พิมพ์ได้และปุ่มฟังก์ชันบางปุ่มเป็นหลัก ดังนั้นการกดปุ่มจึงเป็นตัวเลือกแรก อย่างไรก็ตาม ตามที่กล่าวไว้ในส่วนแรก การกดปุ่มใน IE ไม่รองรับปุ่มฟังก์ชัน ดังนั้น ควรใช้เหตุการณ์การกดปุ่ม/การกดปุ่มเพื่อเสริม

3.3 การนำโค้ดไปใช้

แนวคิดทั่วไปคือการใช้ออบเจ็กต์เหตุการณ์การกดปุ่มเพื่อรับอักขระคีย์ และใช้เหตุการณ์การกดคีย์เพื่อรับอักขระฟังก์ชัน เช่น Enter, Backspace เป็นต้น

การใช้งานโค้ดมีดังนี้

คัดลอกรหัสรหัสดังต่อไปนี้:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD><TITLE>การบันทึกการกดแป้นพิมพ์ js</TITLE>

<META NAME="เครื่องกำเนิดไฟฟ้า" CONTENT="แก้ไขพลัส">

<META NAME="ผู้แต่ง" CONTENT="หยูชางเหริน">

<META NAME="คำหลัก" CONTENT="การบันทึกการกดแป้น js">

<META NAME="คำอธิบาย" CONTENT="การบันทึกการกดแป้น js">

</HEAD>

<ร่างกาย>

<script type="text/javascript">

var keystring = "";//บันทึกสตริงคีย์

ฟังก์ชั่น $(s){return document.getElementById(s)?document.getElementById(s):s;}

ฟังก์ชั่นการกดปุ่ม (e)

-

var currKey=0,CapsLock=0,e=e||เหตุการณ์;

currKey=e.keyCode||e.ซึ่ง||e.charCode;

CapsLock=currKey>=65&&currKey<=90;

สวิตช์ (currKey)

-

//บล็อก Backspace, แท็บ, การขึ้นบรรทัดใหม่, ช่องว่าง, ปุ่มทิศทาง และปุ่มลบ

กรณีที่ 8: กรณีที่ 9:กรณีที่ 13:กรณีที่ 32:กรณีที่ 37:กรณีที่ 38:กรณีที่ 39:กรณีที่ 40:กรณีที่ 46:keyName = "";break;

ค่าเริ่มต้น:keyName = String.fromCharCode(currKey);

-

คีย์สตริง += ชื่อคีย์;

-

ปุ่มฟังก์ชั่นลง (e)

-

var e=e||เหตุการณ์;

var currKey=e.keyCode||e.ซึ่ง||e.charCode;

ถ้า((currKey>7&&currKey<14)||(currKey>31&&currKey<47))

-

สวิตช์ (currKey)

-

กรณีที่ 8: keyName = "[Backspace]";

กรณีที่ 9: keyName = "[ตาราง]";

กรณีที่ 13:keyName = "[ป้อน]";

กรณีที่ 32:keyName = "[ช่องว่าง]";

กรณีที่ 33:keyName = "[PageUp]";

กรณีที่ 34:keyName = "[PageDown]";

กรณีที่ 35:keyName = "[สิ้นสุด]";

กรณีที่ 36:keyName = "[บ้าน]";

กรณีที่ 37:keyName = "[ปุ่มลูกศรซ้าย]";

กรณีที่ 38:keyName = "[แป้นลูกศรขึ้น]";

กรณีที่ 39:keyName = "[ปุ่มลูกศรขวา]";

กรณีที่ 40:keyName = "[ปุ่มลูกศรลง]";

กรณีที่ 46:keyName = "[ลบ]";

ค่าเริ่มต้น:keyName = "";

-

คีย์สตริง += ชื่อคีย์;

-

$("เนื้อหา").innerHTML=keystring;

-

ฟังก์ชั่นคีย์อัพ (e)

-

$("เนื้อหา").innerHTML=keystring;

-

document.onkeypress=ปุ่มกด;

document.onkeydown = คีย์ดาวน์;

document.onkeyup =คีย์อัพ;

</สคริปต์>

<ประเภทอินพุต = "ข้อความ" />

<input type="button" value="ล้างบันทึก" onclick="$('content').innerHTML = '';keystring = '';"/>

<br/>โปรดกดแป้นใดก็ได้เพื่อดูค่าคีย์ตอบสนองของแป้นพิมพ์: <span id="content"></span>

</ร่างกาย>

</HTML>

การวิเคราะห์รหัส:

$(): รับ dom ตาม ID

การกดปุ่ม (e): ดำเนินการสกัดกั้นรหัสอักขระ เนื่องจากจำเป็นต้องรับปุ่มฟังก์ชั่นโดยใช้การกดปุ่ม ปุ่มฟังก์ชั่นเหล่านี้จึงถูกบล็อกในการกดปุ่ม

keydown(e): ส่วนใหญ่ตระหนักถึงการได้มาของปุ่มฟังก์ชั่น

keyup(e): แสดงสตริงที่ถูกดัก