JS / jQuery में एक कीपर / कीडड / कीप इवेंट ट्रिगर?

Question

JS और / या jQuery के टेक्स्ट इनपुट बॉक्स में टेक्स्ट दर्ज करने वाले उपयोगकर्ता को अनुकरण करने का सबसे अच्छा तरीका क्या है?

मैं वास्तव में इनपुट बॉक्स में पाठ नहीं डालना चाहता, मैं सिर्फ उन सभी घटना संचालकों को ट्रिगर करना चाहता हूं जो आम तौर पर इनपुट बॉक्स में जानकारी टाइप करने वाले उपयोगकर्ता द्वारा ट्रिगर किया जाएगा। इसका मतलब है फ़ोकस, कीडाउन, कीप, कीप और ब्लर। मुझे लगता है।

तो कोई इसे कैसे पूरा करेगा?

Answer 1

आप किसी भी ईवेंट को उन्हें सीधे कॉल के साथ ट्रिगर कर सकते हैं, जैसे:

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

क्या यह वही है जो आप करने की कोशिश कर रहे हैं?

आपको संभवतः ट्रिगर .focus()और संभावित भी होना चाहिए.change()

यदि आप कुंजी-घटनाओं को विशिष्ट कुंजी के साथ ट्रिगर करना चाहते हैं, तो आप ऐसा कर सकते हैं:

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

कीप इवेंट की कुछ रोचक चर्चा यहाँ है: jQuery इवेंट कीप: किस कुंजी को दबाया गया था? , विशेष रूप से .which संपत्ति के साथ क्रॉस-ब्राउज़र संगतता के बारे में।

Comments

या$('item').trigger('keypress', {which: 'A'.charCodeAt(0)});

— बॉब स्टीन

@ebynum क्या आप जावास्क्रिप्ट (कोई jquery) के साथ कुछ कोड लिख सकते हैं।

— क्रिस पी

: आप Ctrl की जरूरत है ctrlKey: true:, भी shiftKey,altKey

— Илья Зеленько

Answer 2

आप घटनाओं को भेज सकते हैं

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

Comments

याel.dispatchEvent(new Event('keypress', {keyCode: 'a'}))

— कुज़ोक्स

@Cuzox क्यों नहीं KeyboardEvent का उपयोग करें? यह ShiftKey जैसे मूल्यों को ऑटोफिल करता है और यह सही तरीका है। इसके अलावा, आप कीकोड में एक स्ट्रिंग डालते हैं, यह गलत है।

— SuperOP535

अगर आपको ज़रूरत है Ctrl: el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 70, ctrlKey: true }));(यह एक शॉर्टकट का कारण होगा Ctrl + F)

— Илья леленько

Answer 3

enterकीपर को ट्रिगर करने के लिए , मुझे विशेष रूप से कीकोड प्रॉपर्टी का उपयोग करके @ebynum प्रतिक्रिया को संशोधित करना पड़ा।

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

Comments

keydownघटना पकड़ा नहीं जा रहा है, या मैं यहाँ कुछ गलत कर रहा हूँ? fiddle.jshell.net/Palestinian/8d8J9

— उमर

@ क्लोक: यह काम करता है। Asp.net नियंत्रण को ठीक करने के लिए एक पूर्ण चयनकर्ता के लिए यहां मेरी टिप्पणी की जांच करें: codeproject.com/Tips/269388/… सुनिश्चित करें कि आप Ajax का उपयोग करते हुए डोम में कुछ भी डालने के बाद इसे कॉल करें।

— दान रैंडोल्फ

Answer 4

यहां किसी भी घटना को ट्रिगर करने के लिए एक वेनिला js उदाहरण दिया गया है:

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

Comments

क्या आप उपयोग के कुछ उदाहरण प्रस्तुत कर सकते हैं? कीकोड भेजने के लिए आपके फ़ंक्शन का उपयोग कैसे किया जाएगा?

— मैक

इस पोस्ट के लिए स्रोत कोड निम्नलिखित लिंक पर पाया जा सकता है जिसमें प्रलेखन शामिल है: plainjs.com/javascript/events/trigger-an-event-11

— कीरेन डिक्सन

Answer 5

आप इसे प्राप्त कर सकते हैं: EventTarget.dispatchEvent(event)और ईवेंट के रूप में एक नए KeyboardEvent में पास करके।

उदाहरण के लिए: element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

काम करने का उदाहरण:

// 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 प्रेषण

MDN कीबोर्ड

Answer 6

अब आप कर सकते हैं:

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

Answer 7

सबसे पहले, मुझे यह कहने की ज़रूरत है कि Sionnach733 से नमूना निर्दोष रूप से काम किया। कुछ उपयोगकर्ता वास्तविक उदाहरणों के अनुपस्थित होने की शिकायत करते हैं। यहाँ मेरे दो सेंट हैं। मैं इस साइट का उपयोग करते समय माउस क्लिक सिमुलेशन पर काम कर रहा हूं: https://www.youtube.com/tv । आप कोई भी वीडियो खोल सकते हैं और इस कोड को चलाने का प्रयास कर सकते हैं। यह अगले वीडियो पर स्विच करता है।

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 8

मैंने सोचा था कि मैं आपका ध्यान आकर्षित करूंगा कि विशिष्ट संदर्भ में जहां एक श्रोता को एक jQuery प्लगइन के भीतर परिभाषित किया गया था, फिर एकमात्र चीज जिसने मेरे लिए कुंजीपट घटना को सफलतापूर्वक अनुकरण किया, अंततः उस श्रोता द्वारा पकड़ा गया, सेटटाइमआउट () का उपयोग करना था। जैसे

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

के किसी भी उपयोग $("#txtName").keypress()को नजरअंदाज कर दिया गया था , हालांकि के अंत में रखा गया था .ready() function। वैसे भी कोई विशेष DOM सप्लीमेंट एसिंक्रोनस रूप से नहीं बनाया जा रहा था।

Answer 9

KeyboardEventInit को टाइपस्क्रिप्ट के लिए और सही कीकोड पूर्णांक प्रदान करें

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

Comments

@CamiRodriguez जो कुछ भी आप टाइपस्क्रिप्ट में कर सकते हैं वह आप JS में कर सकते हैं (जैसे jQuery)। सिवाय इसके कि टाइपस्क्रिप्ट जेएस सिंटैक्स को गड़बड़ नहीं करता है, बस उन्हें विस्तारित करता है। यदि आप 'KeyboardEventInit` के रूप में निकालते हैं, तो यह मूल रूप से JS कोड होगा। उत्तर के लिए +1, धन्यवाद।

— गेरगो होर्वाथ