ในสถานการณ์ต่างๆ เช่น การตรวจสอบความถูกต้องของข้อมูลและการตรวจสอบ การจัดสไตล์ขององค์ประกอบฟิลด์จะเปลี่ยนไปทุกครั้งที่ผู้ใช้ปล่อยคีย์ที่กดเพียงคีย์เดียวจากคีย์บอร์ด การเปลี่ยนแปลงสไตล์ที่เกี่ยวข้องกับการกดหรือปล่อยปุ่มแต่ละครั้งจะดำเนินการผ่านตัวจัดการเหตุการณ์ที่จัดทำโดย jQuery โดยเจาะจง ตัวจัดการเหตุการณ์หรือเมธอดที่จัดการหรือเรียกใช้ฟังก์ชันเมื่อมีการปล่อยคีย์ที่กดคือ “ คีย์อัพ ()' วิธี.
ในทางกลับกัน วิธีการที่ใช้จัดการหรือเรียกใช้ฟังก์ชันคีย์ที่ถูกกดคือ “ คีย์ดาวน์ ()” และคุณสามารถตรวจสอบการเชื่อมโยงของเราได้ บทความ สำหรับงานนี้
ในบล็อกนี้ เราจะให้คำอธิบายโดยย่อเกี่ยวกับวิธี jQuery keyup()
วิธีการใช้วิธี jQuery keyup()
เจคิวรี่” คีย์อัพ ()” วิธีการทริกเกอร์ฟังก์ชันที่ไม่ระบุตัวตนทุกครั้งที่ผู้ใช้หยุดกดหรือป้อนคีย์ภายในฟิลด์ที่เลือก วิธีนี้ยังใช้เพื่อใช้การจัดรูปแบบแบบไดนามิกกับองค์ประกอบที่เลือกแบบเรียลไทม์
ไวยากรณ์
ไวยากรณ์ที่ใช้สำหรับ keyup() วิธีการ jQuery เป็นดังนี้:
$ ( 'นี้' ) . คีย์อัพ ( ฟังก์ชันแบบกำหนดเอง )
ในไวยากรณ์ข้างต้น “ นี้ ” คือองค์ประกอบ HTML ที่เลือก และ “ ฟังก์ชันแบบกำหนดเอง ” เป็นฟังก์ชันที่ดำเนินการโดย “ คีย์อัพ ” วิธีการเหนือ “ นี้ '.
เรามาดูตัวอย่างสักสองสามตัวอย่างเพื่อความเข้าใจที่ลึกซึ้งยิ่งขึ้น
ตัวอย่างที่ 1: การเปลี่ยนสีข้อความโดยใช้วิธี 'keyup()'
ในกรณีนี้ สีของข้อความที่ป้อนจะถูกเปลี่ยนเป็นสีอื่นเมื่อผู้ใช้ปล่อยปุ่มที่กดไว้แล้วดังที่แสดงด้านล่าง:
< html >
< ศีรษะ >
< สคริปต์ src = 'https://code.jquery.com/jquery-3.7.0.js' >< / สคริปต์ >
< สคริปต์ >
$(เอกสาร).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('color', 'forestgreen');
});
});
< / สคริปต์ >
< / ศีรษะ >
< ร่างกาย >
< กอง >
ป้อนข้อมูล Linuxhint: < ป้อนข้อมูล รหัส = 'การสาธิต' พิมพ์ = 'ข้อความ' / >
< / กอง >
< / ร่างกาย >
< / html >
คำอธิบายของโค้ดข้างต้นมีการกล่าวถึงด้านล่าง:
- ขั้นแรก นำเข้า jQuery เข้าสู่โปรเจ็กต์โดยแทรก CDN ออนไลน์โดยไปที่สิ่งนี้ ลิงค์ ของเอกสารราชการ
- ถัดไป สร้างฟังก์ชันที่ไม่ระบุตัวตนที่จะถูกเรียกเมื่อ “ เอกสาร ” หรือหน้าถูกโหลด ฟังก์ชั่นนี้เลือกองค์ประกอบ HTML ที่มีรหัสเป็น “สาธิต” และแนบ “ คีย์อัพ ()” ด้วยวิธีการนั้น
- “ คีย์อัพ ()” วิธีการเรียกใช้ฟังก์ชันการโทรกลับซึ่งใช้คำสั่ง “ ซีเอสเอส ()” เพื่อกำหนดสีตัวอักษรของข้อความเป็น “ สีเขียวของป่า '.
- ตอนนี้ให้สร้าง '< ป้อนข้อมูล >” องค์ประกอบภายใน “< ร่างกาย >” ติดแท็กและกำหนดรหัสเป็น “ การสาธิต '.
ตัวอย่างหน้าเว็บหลังจากเสร็จสิ้นกระบวนการรวบรวม:
ผลลัพธ์จะแสดงสีของข้อความที่เปลี่ยนไปเมื่อมีการปล่อยคีย์ที่เลือก
ตัวอย่างที่ 2: การเปลี่ยนสีพื้นหลังแบบไดนามิก
ในตัวอย่างนี้ สีพื้นหลังที่แตกต่างกันจะถูกตั้งค่าสำหรับองค์ประกอบ HTML ที่เลือกทุกครั้งที่ผู้ใช้ออกจากปุ่มที่กด มาดูโค้ดสำหรับสถานการณ์นี้กัน:
< ศีรษะ >< สคริปต์ src = 'https://code.jquery.com/jquery-3.7.0.js' >< / สคริปต์ >
< สคริปต์ >
ให้พื้นหลังเฉดสี = [ 'อความารีน' , 'ส้ม' , 'นักเรียนนายร้อยบลู' , 'ป่าเขียว' ,
'แสงสีเทา' , 'แซนดี้บราวน์' , 'สีม่วงแดง' , 'เบอร์ลี่วูด' ] ;
ให้เจ = 0 ;
$ ( เอกสาร ) .คีย์อัพ ( การทำงาน ( เหตุการณ์ ) {
$ ( '#hgg' ) .ซีเอส ( 'สีพื้นหลัง' , เฉดสีพื้นหลัง [ เจ ] ) ;
เจ++;
เจ = เจ % 9 ;
} ) ;
< / สคริปต์ >
< / ศีรษะ >
< ร่างกาย >
< h1 สไตล์ = 'สี: เขียวน้ำทะเล' >บทความลินุกซ์< / h1 >< พี่ชาย >
< กอง รหัส = 'hgg' สไตล์ = 'ช่องว่างภายใน: 10px' >
< h2 > คีย์ jQuery ใช้เพื่อตั้งค่าที่แตกต่างกัน พื้นหลัง ทุกครั้งที่ปล่อยคีย์< / h2 >
< พี่ชาย / >
< / กอง >
< / ร่างกาย >
คำอธิบายของรหัสข้างต้น:
- ขั้นแรก ให้นำเข้า jQuery ในโครงการของคุณโดยเพิ่ม jQuery CDN ภายในส่วน “< ศีรษะ >” แท็ก
- จากนั้นสร้างอาร์เรย์ชื่อ “ เฉดสีพื้นหลัง ” ซึ่งมีสีสุ่มแปดสี
- ต่อไป “ คีย์อัพ ()” วิธีการที่แนบมากับ “ เอกสาร ” และเรียกใช้ฟังก์ชันโทรกลับแบบไม่ระบุชื่อ ฟังก์ชั่นนี้เลือกองค์ประกอบ HTML ที่มีรหัสเป็น “ เฮ้ ” และใช้ CSS “ สีพื้นหลัง ' คุณสมบัติ.
- อาร์เรย์ “ เฉดสีพื้นหลัง ” ถูกส่งผ่านเป็นค่าสำหรับคุณสมบัติ CSS และดัชนีถูกตั้งค่าเป็น “ เจ ' ตัวแปร. ตัวแปรนี้จะเพิ่มขึ้นครั้งละหนึ่งรายการและรีสตาร์ทจาก ' 0 ” ดัชนีเมื่อค่าถึง “ 8 '. เพราะดัชนีสูงสุดในอาเรย์คือ “ 7 '.
- หลังจากนั้นให้สร้างตัวเลือก “ กอง ” องค์ประกอบที่มีรหัสเป็น “ เฮ้ ” สีพื้นหลังขององค์ประกอบนี้จะเปลี่ยนเมื่อปล่อยปุ่มที่กด
ตัวอย่างหน้าเว็บหลังการรวบรวม:
ผลลัพธ์ยืนยันว่าสีพื้นหลังสำหรับองค์ประกอบ HTML ที่เลือกมีการเปลี่ยนแปลงในแต่ละครั้งเมื่อมีการปล่อยปุ่มที่กดหรือที่เลือก นั่นคือทั้งหมดที่เกี่ยวกับการใช้ “ คีย์อัพ ()' วิธี.
บทสรุป
เจคิวรี่” คีย์อัพ ()” วิธีการทริกเกอร์ฟังก์ชันการโทรกลับในองค์ประกอบ HTML ที่เลือกเมื่อมีการปล่อยปุ่มที่กด เมธอดนี้จะไม่เรียกเมื่อมีการกดปุ่ม แต่ในขณะที่ปล่อยหรือกดคีย์ ฟังก์ชันนี้จะเรียกใช้ฟังก์ชันเรียกกลับ บล็อกนี้ได้อธิบายการใช้งานและการทำงานของเมธอด jQuery keyup()