141

मैं एक keypressश्रोता का उपयोग कर रहा हूँ उदा ..

addEventListener("keypress", function(event){

}

हालाँकि, यह एक बैकस्पेस का पता नहीं लगता है जो पाठ को मिटा देता है ...

क्या इसका पता लगाने के लिए एक अलग श्रोता का उपयोग किया जा सकता है?

javascript keypress addeventlistener

— Skizit
स्रोत

167

कुंजी दबाने घटना केवल चरित्र शुरू होता है (प्रिंट करने योग्य) चाबियाँ, KeyDown घटना सभी तरह के रूप में अमुद्रणीय सहित के लिए उठाया है Control, Shift, Alt,BackSpace , आदि

अपडेट करें:

जब एक कुंजी को दबाया जाता है तो कीपर घटना को निकाल दिया जाता है और यह कुंजी सामान्य रूप से एक चरित्र मान उत्पन्न करती है

संदर्भ ।

— क्रिस इवानोव
स्रोत

3

कड़ाई से सच नहीं है: कई गैर-मुद्रण योग्य कुंजियाँ keypressकई ब्राउज़रों में आग लगाती हैं। देखें unixpapa.com/js/key.html

— टिम नीचे

मोज़िला के वर्तमान संस्करण में, बैकस्पेस और सभी को कीपर ईवेंट में पाया गया है।

— iniravpatel

70

keydownइसके बजाय प्रयास करें keypress।

कीबोर्ड की घटनाओं इस क्रम में होते हैं: keydown, keyup,keypress

बैकस्पेस के साथ समस्या शायद यह है कि ब्राउज़र वापस नेविगेट करेगा keyupऔर इस प्रकार आपका पेज keypressईवेंट नहीं देख पाएगा ।

— Tomalak
स्रोत

मैंने मानकों पर गौर नहीं किया है, लेकिन घटना क्रम (फ़ायरफ़ॉक्स 37 में कम से कम) प्रतीत होता है keydown keypress keyup। unixpapa.com/js/testkey.html

— jxmallett

यह भी लगता है कि, इनपुट्स में महत्वपूर्ण घटनाओं के लिए, चरित्र तब तक फ़ील्ड में प्रकट नहीं होता है जब तक कि keyupईवेंट को निकाल नहीं दिया जाता है।

— jxmallett

पिछले एक - आईओएस (8.2) पर बैकस्पेस कुंजी केवल एक keydownघटना को आग लगाती है लेकिन कुछ समय बाद तक इनपुट से चरित्र को हटाया नहीं जाता है।

— jxmallett

यह उत्तर है। यह कैप्चर कुंजी प्रेस और Ctrl + V कुंजी को

— हटाता है

30

keypressघटना ब्राउज़रों में अलग हो सकता है।

मैंने क्रोम और फ़ायरफ़ॉक्स पर कीबोर्ड की घटनाओं (JQuery के शॉर्टकट का उपयोग करके) की तुलना करने के लिए एक Jsfiddle बनाया । ब्राउज़र के आधार पर आप जिस keypressइवेंट का उपयोग कर रहे हैं, वह ट्रिगर होगा या नहीं - बैकस्पेस keydown/keypress/keyupफ़ायरफ़ॉक्स पर केवल keydown/keyupक्रोम पर ट्रिगर होगा ।

एकल कीक्लिक घटनाओं की शुरुआत हुई

क्रोम पर

keydown/keypress/keyupजब ब्राउज़र एक कीबोर्ड इनपुट पंजीकृत करता है ( keypressनिकाल दिया जाता है)
keydown/keyup यदि कोई कीबोर्ड इनपुट नहीं है (Alt, Shift, backspace, arrow कुंजियों के साथ परीक्षण किया गया है)
keydown केवल टैब के लिए?

फ़ायरफ़ॉक्स पर

keydown/keypress/keyupजब ब्राउज़र एक कीबोर्ड इनपुट पंजीकृत करता है, लेकिन बैकस्पेस, एरो कीज़, टैब के लिए भी (तो यहाँ keypressभी बिना इनपुट के ही निकाल दिया जाता है)
keydown/keyup कुल मिलाकर, बदलाव

यह आश्चर्यजनक नहीं होना चाहिए क्योंकि https://api.jquery.com/keypress/ के अनुसार :

नोट: जैसा कि कीपर ईवेंट किसी आधिकारिक विनिर्देश द्वारा कवर नहीं किया गया है, इसका उपयोग करते समय सामना किया गया वास्तविक व्यवहार ब्राउज़रों, ब्राउज़र संस्करणों और प्लेटफार्मों में भिन्न हो सकता है।

कीप ईवेंट प्रकार का उपयोग W3C ( http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress ) द्वारा किया गया है

कीपर ईवेंट प्रकार को संदर्भ और पूर्णता के लिए इस विनिर्देश में परिभाषित किया गया है, लेकिन यह विनिर्देश इस ईवेंट प्रकार के उपयोग को दर्शाता है। जब संदर्भों के संपादन में, लेखक इसके बजाय पूर्वप्रकाशित घटना की सदस्यता ले सकते हैं।

अंत में, अपने सवाल का जवाब देने के लिए, आप का उपयोग करना चाहिए keyupया keydownफ़ायरफ़ॉक्स और क्रोम के पार एक बैकस्पेस पता लगाने के लिए।

इसे यहाँ पर आज़माएँ:

$(".inputTxt").bind("keypress keyup keydown", function (event) {
    var evtType = event.type;
    var eWhich = event.which;
    var echarCode = event.charCode;
    var ekeyCode = event.keyCode;

    switch (evtType) {
        case 'keypress':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        case 'keyup':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<p>");
            break;
        case 'keydown':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        default:
            break;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="inputTxt" type="text" />
<div id="log"></div>

स्निपेट का विस्तार करें

— user2314737
स्रोत

1

बहुत बढ़िया जवाब - ज्यादातर ब्राउजरों में बैकस्पेस को संभालने के विभिन्न तरीकों की व्याख्या के लिए

— Jivan

2

W3School पहले से ही किया गया है: w3schools.com/jsref/…

— Tân

1

कोड स्निपेट बहुत मददगार था

— जॉन गिल्मर

17

मैंने जो कुछ लिखा है वह किसी को भी एक मुद्दे पर आता है जिसमें लोगों को बैकस्पेस मारते हुए लगता है कि वे एक फॉर्म फील्ड में हैं

window.addEventListener("keydown", function(e){
    /*
     * keyCode: 8
     * keyIdentifier: "U+0008"
    */
    if(e.keyCode === 8 && document.activeElement !== 'text') {
        e.preventDefault();
        alert('Prevent page from going back');
    }
});

— सेठ मैक्कलीन
स्रोत

8

मेरा संख्यात्मक नियंत्रण:

function CheckNumeric(event) {
    var _key = (window.Event) ? event.which : event.keyCode;
    if (_key > 95 && _key < 106) {
        return true;
    }
    else if (_key > 47 && _key < 58) {
        return true;
    }
    else {
        return false;
    }
}

<input type="text" onkeydown="return CheckNumerick(event);" />

कोशिश करो

बैकस्पेस कुंजी कोड 8 है

— VolkanCetinkaya
स्रोत

6

Event.key === "बैकस्पेस"

हाल ही में और अधिक क्लीनर: का उपयोग करें event.key। कोई और अधिक मनमानी संख्या कोड!

note.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace") {
        // Do something
    }
});

मोज़िला डॉक्स

ब्राउज़रों का समर्थन किया

— Gibolt
स्रोत

1

2018 में इस बारे में जाने का सबसे अच्छा तरीका है!

— टफेंटीना

मैंने अपने साथ काम की हर एक भाषा में बैकस्पेस के लिए कुंजी कोड 8 का उपयोग किया है। ASCII कोड जानें, वे मनमाने नहीं हैं।

— आंद्रे वेरलैंग

3

सिर्फ इसलिए कि तुम है का उपयोग किया गया मतलब यह नहीं है वहाँ एक बेहतर विकल्प नहीं है। .keyवर्तमान में डॉक्स द्वारा अनुशंसित विकल्प है। इसके अलावा, यह किसी भी दिए गए कुंजी के लिए विभिन्न मैपिंग के साथ विभिन्न अंतरराष्ट्रीय कीबोर्ड का समर्थन करता है। वे इस अर्थ में मनमानी नहीं कर रहे हैं कि वे निश्चित हैं, लेकिन वे कोड पढ़ते समय हैं

— गिबोल्ट

2

इसके बजाय कीअप / कीडड / प्रिन्टपुट घटनाओं में से एक का उपयोग करें।

इस संदर्भ के आधार पर , कुंजी को पदावनत किया जाता है और अब अनुशंसित नहीं किया जाता है।

जब एक चरित्र मान उत्पन्न करने वाली कुंजी को दबाया जाता है, तो कीपर घटना को निकाल दिया जाता है। वर्ण मान उत्पन्न करने वाली कुंजियों के उदाहरण वर्णनात्मक, संख्यात्मक और विराम चिह्न कुंजियाँ हैं। उन चरित्रों के उदाहरण जो चरित्र मान उत्पन्न नहीं करते हैं, जैसे कि Alt, Shift, Ctrl, या Meta जैसे संशोधक कुंजियाँ हैं।

यदि आप "पहले" का उपयोग करते हैं तो इसके बारे में सावधान रहें यह ब्राउज़र संगतता है । "प्रीफिनप्यूट" और अन्य दो के बीच का अंतर यह है कि "पहलेइनपुट" को निकाल दिया जाता है जब इनपुट मूल्य को बदलने के बारे में होता है, इसलिए उन वर्णों के साथ जो इनपुट मूल्य को बदल नहीं सकते हैं, यह निकाल नहीं दिया जाता है (जैसे शिफ्ट, ctr, alt)।

मुझे एक ही समस्या थी और कीप का उपयोग करके इसे हल किया गया था।

— अरश नदली
स्रोत

जावास्क्रिप्ट श्रोता, "कीपर" बैकस्पेस का पता नहीं लगाता है?

एकल कीक्लिक घटनाओं की शुरुआत हुई

Event.key === "बैकस्पेस"