Kích hoạt một sự kiện keypress/keydown/keyup trong JS/jQuery?

Question

Cách tốt nhất để mô phỏng người dùng nhập văn bản vào hộp nhập văn bản trong JS và/hoặc jQuery là gì?

tôi không muốn thực sự đưa văn bản vào hộp nhập liệu, tôi chỉ muốn để kích hoạt tất cả các sự kiện xử lý mà thông thường sẽ được kích hoạt bởi một người dùng gõ thông tin vào một hộp đầu vào. Điều này có nghĩa là lấy nét, nhấn phím, bấm phím, bấm phím và làm mờ. Tôi nghĩ.

Vậy làm cách nào để thực hiện điều này?

Answer 1

Bạn có thể kích hoạt bất kỳ sự kiện với một cuộc gọi trực tiếp cho họ, như thế này:

$(function() { 
    $('item').keydown(); 
    $('item').keypress(); 
    $('item').keyup(); 
    $('item').blur(); 
}); 

Điều đó làm những gì bạn đang cố gắng để làm gì?

Bạn nên có lẽ cũng kích hoạt .focus() và có khả năng .change()

Nếu bạn muốn kích hoạt phím-sự kiện với các phím cụ thể, bạn có thể làm như vậy như thế này:

$(function() { 
    var e = $.Event('keypress'); 
    e.which = 65; // Character 'A' 
    $('item').trigger(e); 
}); 

Có một số cuộc thảo luận thú vị của các sự kiện nhấn phím ở đây: jQuery Event Keypress: Which key was pressed?, đặc biệt liên quan đến tính tương thích giữa các trình duyệt với thuộc tính .which.

Answer 2

Để kích hoạt một số nhập nhấn phím, tôi phải sửa đổi phản hồi @ebynum, cụ thể, bằng cách sử dụng thuộc tính keyCode.

e = $.Event('keyup'); 
e.keyCode= 13; // enter 
$('input').trigger(e); 

Answer 3

Bây giờ bạn đã có thể làm:

var e = $.Event("keydown", {keyCode: 64}); 

Answer 4

Dưới đây là một vani js ví dụ để kích hoạt bất kỳ sự kiện: Sự kiện

function triggerEvent(el, type){ 
if ('createEvent' in document) { 
     // modern browsers, IE9+ 
     var e = document.createEvent('HTMLEvents'); 
     e.initEvent(type, false, true); 
     el.dispatchEvent(e); 
    } else { 
     // IE 8 
     var e = document.createEventObject(); 
     e.eventType = type; 
     el.fireEvent('on'+e.eventType, e); 
    } 
} 

Answer 5

Bạn có thể cử như

el.dispatchEvent(new Event('focus')); 
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); 

Answer 6

Trước hết, tôi cần phải nói rằng mẫu từ Sionnach733 hoạt động hoàn hảo. Một số người dùng phàn nàn về việc vắng mặt các ví dụ thực tế. Đây là hai xu của tôi. Tôi đã làm việc trên mô phỏng nhấp chuột khi sử dụng trang web này: https://www.youtube.com/tv. Bạn có thể mở bất kỳ video nào và thử chạy mã này. Nó thực hiện chuyển sang video tiếp theo.

function triggerEvent(el, type, keyCode) { 
    if ('createEvent' in document) { 
      // modern browsers, IE9+ 
      var e = document.createEvent('HTMLEvents'); 
      e.keyCode = keyCode; 
      e.initEvent(type, false, true); 
      el.dispatchEvent(e); 
    } else { 
     // IE 8 
     var e = document.createEventObject(); 
     e.keyCode = keyCode; 
     e.eventType = type; 
     el.fireEvent('on'+e.eventType, e); 
    } 
} 

var nextButton = document.getElementsByClassName('icon-player-next')[0]; 
triggerEvent(nextButton, 'keyup', 13); // simulate mouse/enter key press 

Answer 7

Bạn có thể đạt được điều này với: EventTarget.dispatchEvent(event) và bằng cách chuyển vào Bàn phím mớiEvent là sự kiện.

Ví dụ: element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

dụ làm việc:

// get the element in question 
 
const input = document.getElementsByTagName("input")[0]; 
 

 
// focus on the input element 
 
input.focus(); 
 

 
// add event listeners to the input element 
 
input.addEventListener('keypress', (event) => { 
 
    console.log("You have pressed key: ", event.key); 
 
}); 
 

 
input.addEventListener('keydown', (event) => { 
 
    console.log(`key: ${event.key} has been pressed down`); 
 
}); 
 

 
input.addEventListener('keyup', (event) => { 
 
    console.log(`key: ${event.key} has been released`); 
 
}); 
 

 
// dispatch keyboard events 
 
input.dispatchEvent(new KeyboardEvent('keypress', {'key':'h'})); 
 
input.dispatchEvent(new KeyboardEvent('keydown', {'key':'e'})); 
 
input.dispatchEvent(new KeyboardEvent('keyup', {'key':'y'}));

<input type="text" placeholder="foo" />

MDN dispatchEvent

MDN KeyboardEvent