JS / jQuery'de bir tuşa basma / tuşlama / tuşlama olayını tetikle?

JS ve / veya jQuery'de metin giriş kutusuna metin giren bir kullanıcının simülasyonunu yapmanın en iyi yolu nedir?

Ben yok ben sadece tüm olay tetiklemek istiyorum aslında girdi kutusuna metni koymak istiyorum işleyicileri normalde giriş kutusuna bir kullanıcı yazarak bilgi tetiklediği olacaktı. Bu, odaklama, tuşlar, tuşa basma, tuşlar ve bulanıklaştırma anlamına gelir. Bence.

Peki bunu nasıl başarabiliriz?

Herhangi bir olayı doğrudan arayarak olayları tetikleyebilirsiniz, örneğin:

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

Yapmaya çalıştığın şey bu mu?

Muhtemelen tetiklemelisiniz .focus()ve potansiyel olarak.change()

Anahtar olayları belirli tuşlarla tetiklemek istiyorsanız, bunu şu şekilde yapabilirsiniz:

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

Burada tuşa basma olayları hakkında ilginç bir tartışma var: jQuery Olayı Tuşa basma: Hangi tuşa basıldı? , özellikle .which özelliğiyle tarayıcılar arası uyumluluğa ilişkin.

Gibi etkinlikler gönderebilirsiniz

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

Bir entertuşa basmayı tetiklemek için @ebynum yanıtını, özellikle keyCode özelliğini kullanarak değiştirmek zorunda kaldım.

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

İşte herhangi bir olayı tetikleyen bir vanilya js örneği:

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);
    }
}

Bunu şu şekilde yapabilirsiniz: EventTarget.dispatchEvent(event)ve etkinlik olarak yeni bir KeyboardEvent geçirerek.

Örneğin: element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

Çalışma örneği:

// 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 dağıtımı

MDN KeyboardEvent

Artık şunları yapabilirsiniz:

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

Her şeyden önce, Sionnach733'ün örneğinin kusursuz çalıştığını söylemeliyim . Bazı kullanıcılar gerçek örneklerin bulunmadığından şikayet ederler. İşte benim iki sentim. Bu siteyi kullanırken fare tıklama simülasyonu üzerinde çalışıyorum: https://www.youtube.com/tv . Herhangi bir videoyu açabilir ve bu kodu çalıştırmayı deneyebilirsiniz. Sonraki videoya geçiş yapar.

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

Bir dinleyicinin bir jQuery eklentisi içinde tanımlandığı belirli bağlamda, o zamanlar bu dinleyici tarafından yakalanan benim için keypress olayını başarılı bir şekilde simüle eden tek şeyin setTimeout () kullanmak olduğuna dikkatinizi çekeceğini düşündüm. Örneğin

setTimeout(function() { $("#txtName").keypress() } , 1000);

Herhangi bir kullanımı $("#txtName").keypress()olan gözardı sonunda yer rağmen .ready() function. Zaten eşzamansız olarak belirli bir DOM eki oluşturulmuyordu.

KeyboardEventInit'e yazılan daktilo için ve doğru keyCode tamsayısını sağlayın

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);