วิธีการที่ชัดเจนในการทริกเกอร์เหตุการณ์ keypress ด้วย jQuery


260

ฉันได้อ่านคำตอบทั้งหมดของคำถามนี้แล้วและดูเหมือนว่าไม่มีวิธีแก้ไขใด ๆ

นอกจากนี้ฉันยังได้รับความรู้สึกที่ทำให้การกดปุ่มด้วยตัวอักษรพิเศษไม่ทำงานเลย บางคนสามารถยืนยันได้ว่าใครเป็นผู้ทำสิ่งนี้


14
ไม่พลาดคุณเข้าใจแนวคิดนี้ นี่ไม่ใช่วิธีการทำงาน ทริกเกอร์จะเรียกตัวจัดการเหตุการณ์เท่านั้น จะไม่พิมพ์รหัสจริง หากคุณต้องการจำลองเอฟเฟกต์ของการพิมพ์คีย์ให้เพิ่มคีย์ลงในค่าอินพุตและทริกเกอร์เหตุการณ์ในเวลาเดียวกัน
Nadia Alramli

น่าสนใจฉันไม่รู้ว่า ในกรณีนี้คุณสามารถบอกฉันได้หรือไม่ว่าการเรียกใช้เหตุการณ์จะทำให้เกิดเหตุการณ์นี้สำหรับ libs ที่ไม่ใช่ jquery หรือไม่ เช่นถ้าฉันมี onKeydown ตั้งค่าใน JS ธรรมดามันจะจับเหตุการณ์ "ปลอม" ของฉัน
mkoryak

2
ใช่ถ้ามีการตั้ง onkeydown = '... ' ใน js ธรรมดา มันจะถูกเรียกโดยเหตุการณ์ปลอม ฉันไม่แน่ใจเกี่ยวกับเรื่องนี้ แต่ฉันทำการทดสอบอย่างรวดเร็วและใช้งานได้
Nadia Alramli

2
@ นาเดียขอบคุณสำหรับสิ่งนั้น! ฉันได้อ่านคำตอบทั้งหมดที่สงสัยว่าทำไมสิ่งต่าง ๆ ไม่ทำงานก่อนที่จะตระหนักถึงความคาดหวังของฉันไม่ถูกต้อง ฉันสงสัยว่าคนอื่นจำนวนมากจะมีความเข้าใจผิดเหมือนกัน
mikemaccana

3
สองปีต่อมา ... การอ่านหน้าดูเหมือนว่าวิธีที่ชัดเจนคือ: $ ('input # search'). trigger ($. เหตุการณ์ ('keydown', {ซึ่ง: $. ui.keyCode.ENTER, keyCode: $ .ui.keyCode.ENTER}));
molokoloco

คำตอบ:


365

หากคุณต้องการทริกเกอร์เหตุการณ์ keypress หรือ keydown สิ่งที่คุณต้องทำคือ:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
$("input").trigger(e);

42
คำถามคือวิธีการที่จะเรียกไม่ได้วิธีการจับ
ชาดแกรนท์

2
ฉันได้เพิ่มตัวอย่างสำหรับการเรียกใช้เหตุการณ์
Nadia Alramli

4
คำตอบที่ดีมาก เป็นที่น่าสังเกตว่า jQuery.Event มีให้สำหรับ jQuery 1.3 หรือสูงกว่า มันมีความเกี่ยวข้องในคำถามนี้: stackoverflow.com/questions/1823617/…
artlung

8
สิ่งนี้ไม่ได้ผลสำหรับฉันด้วยตัวเลื่อน jQuery UI ฉันต้องตั้ง e.keyCode เหมือนคำตอบของ OreiA ด้านล่าง
crizCraig

2
fwiw ฉันประสบความสำเร็จมากขึ้นด้วย 'การกดปุ่ม' สำหรับใบสมัครของฉัน
ทำเครื่องหมาย

81

กระชับขึ้นเล็กน้อยในขณะนี้ด้วย jQuery 1.6+ :

var e = jQuery.Event( 'keydown', { which: $.ui.keyCode.ENTER } );

$('input').trigger(e);

(หากคุณไม่ได้ใช้ jQuery UI ให้ย่อยรหัสคีย์ที่เหมาะสมแทน)


4
เพียงจำไว้ว่าจะแทนที่ 'keyCode' สำหรับ 'ซึ่ง' เช่นกัน
Richard Nienaber

ใช่คุณต้องกำหนดว่าและ keyCode ใดจะปลอดภัย (หากผู้ฟังเหตุการณ์ตรวจสอบ e.keyCode มันจะทำงานได้ต่อเมื่อคุณกำหนด keyCode เมื่อสร้างวัตถุ jQuery.Event)
jackocnr

1
jQuery normalises ว่า / keyCode ใดดังนั้นควรใส่ทั้งสองอย่าง
Nigel Angel

+1 สำหรับลิงก์ไปยัง api.jquery.com และปัจจุบันรุ่น jQuery ไม่ปกติซึ่ง / keyCode ดังนั้นคุณจึงควรจัดหาทั้งเพื่อความปลอดภัย
วิคเตอร์

2
@SamuelLindblom ฉันควรเขียนให้ชัดเจนยิ่งขึ้น: jQuery ไม่ทำให้คุณสมบัติเหตุการณ์ผ่านไป.trigger(jQuery.Event('name', props))อย่างปกติ ดูตัวอย่างjsfiddle.net/9ggmrbpd/1 - คุณสมบัติของเหตุการณ์ที่ถูกทริกเกอร์จะถูกส่งผ่านตามที่เป็นอยู่ รหัสที่มา: github.com/jquery/jquery/blob/master/src/event.js#L739
วิกเตอร์

68

คำตอบที่แท้จริงต้องรวม keyCode:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
e.keyCode = 50
$("input").trigger(e);

แม้ว่าเว็บไซต์ของ jQuery จะบอกว่าสิ่งใดและรหัสหลักเป็นแบบปกติ แต่ก็เข้าใจผิดอย่างมาก เป็นการปลอดภัยที่สุดที่จะทำการตรวจสอบข้ามเบราว์เซอร์มาตรฐานสำหรับ e.which และ e.keyCode และในกรณีนี้ให้กำหนดทั้งสองอย่าง


34
+1 โดยวิธีการe.keyCode = e.which = 50;ในบรรทัดเดียวจะดีกว่า :)
Sk8erPeter

ฉันเพิ่งค้นพบว่าการใช้อย่างเดียวkeyCodeไม่ได้ผล ต้องตั้งค่าให้ทั้งสองทำงาน
Tasos K.

@ Sk8erPeter มันจะไม่เกิดขึ้นเว้นแต่จะเป็นการแข่งขันการเขียนโค้ดแบบ
golph

18

หากคุณใช้ jQuery UI ด้วยคุณสามารถทำสิ่งนี้ได้:

var e = jQuery.Event("keypress");
e.keyCode = $.ui.keyCode.ENTER;
$("input").trigger(e);

1
e. ซึ่งดูเหมือนจะไม่ทำงานกับแถบเลื่อน jQuery UI ของฉัน ขอบคุณสำหรับคำตอบนี้ มันใช้งานได้ดี
crizCraig

5

ฉันทำให้มันทำงานกับ keyup

$("#id input").trigger('keyup');

3
ในคำถามของฉันเมื่อ 6 ปีที่แล้วฉันยังต้องการตั้งค่ารหัสกุญแจ แต่ไม่รู้ว่าจะทำอย่างไร
mkoryak

4

ตกลงสำหรับฉันที่ทำงานกับสิ่งนี้ ...

var e2key = function(e) {
    if (!e) return '';
    var event2key = {
        '96':'0', '97':'1', '98':'2', '99':'3', '100':'4', '101':'5', '102':'6', '103':'7', '104':'8', '105':'9', // Chiffres clavier num
        '48':'m0', '49':'m1', '50':'m2', '51':'m3', '52':'m4', '53':'m5', '54':'m6', '55':'m7', '56':'m8', '57':'m9', // Chiffres caracteres speciaux
        '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', // Alphabet
        '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter', '27':'esc', '32':'space', '107':'+', '109':'-', '33':'pageUp', '34':'pageDown' // KEYCODES
    };
    return event2key[(e.which || e.keyCode)];
};

var page5Key = function(e, customKey) {
    if (e) e.preventDefault();
    switch(e2key(customKey || e)) {
        case 'left': /*...*/ break;
        case 'right': /*...*/ break;
    }
};

$(document).bind('keyup', page5Key);

$(document).trigger('keyup', [{preventDefault:function(){},keyCode:37}]); 

2

ในกรณีที่คุณต้องคำนึงถึงเคอร์เซอร์ปัจจุบันและการเลือกข้อความ ...

สิ่งนี้ไม่ได้ผลสำหรับฉันสำหรับแอป AngularJS บน Chrome เมื่อนาเดียชี้ให้เห็นในความคิดเห็นดั้งเดิมตัวละครจะไม่ปรากฏให้เห็นในฟิลด์อินพุต (อย่างน้อยนั่นคือประสบการณ์ของฉัน) นอกจากนี้โซลูชันก่อนหน้านี้จะไม่คำนึงถึงการเลือกข้อความปัจจุบันในฟิลด์อินพุต ผมใช้ที่ยอดเยี่ยมห้องสมุดjQuery เลือก

ฉันมีปุ่มกดตัวเลขบนหน้าจอที่กำหนดเองซึ่งเติมข้อมูลในช่องป้อนข้อมูลหลายช่อง ฉันต้อง ...

  1. เมื่อทำการโฟกัสให้บันทึกโฟกัสสุดท้ายองค์ประกอบ
  2. เบลอให้บันทึกการเลือกข้อความปัจจุบัน (เริ่มและหยุด)

    var pos = element.selection('getPos')
    lastFocus.pos = { start: pos.start, end: pos.end}
  3. เมื่อกดปุ่มบนปุ่มกดของฉัน:

    lastFocus.element.selection( 'setPos', lastFocus.pos)
    lastFocus.element.selection( 'replace', {text: myKeyPadChar, caret: 'end'})



1

สามารถทำได้เช่นเดียวกับเอกสารนี้

$('input').trigger("keydown", {which: 50});

1
ดูเหมือนจะไม่ทำงานเนื่องจากใช้อาร์กิวเมนต์ extraParameters ซึ่งไม่ได้ตั้งค่าอะไรภายในอาร์กิวเมนต์ของเหตุการณ์ แต่เพิ่มอาร์กิวเมนต์พิเศษลงในการเรียกกลับตัวจัดการเหตุการณ์
TimeWaster

1
ไม่ใช่โซลูชันที่ถูกต้อง
Entwickler
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.