मैं बैकस्पेस कुंजी को वापस नेविगेट करने से कैसे रोक सकता हूं?

Question

IE पर मैं (बहुत गैर-मानक, लेकिन काम कर रहा) jQuery के साथ ऐसा कर सकता हूं

if ($.browser.msie)
    $(document).keydown(function(e) { if (e.keyCode == 8) window.event.keyCode = 0;});

लेकिन क्या यह एक तरह से संभव है जो फ़ायरफ़ॉक्स पर काम करता है, या एक बोनस के लिए क्रॉस-ब्राउज़र तरीके से?

रिकार्ड के लिए:

$(document).keydown(function(e) { if (e.keyCode == 8) e.stopPropagation(); });

कुछ नहीं करता।

$(document).keydown(function(e) { if (e.keyCode == 8) e.preventDefault(); });

समस्या को हल करता है, लेकिन पृष्ठ पर अनुपलब्ध बैकस्पेस कुंजी को प्रस्तुत करता है, जो मूल व्यवहार से भी बदतर है।

संपादित करें: इसका कारण यह है कि मैं एक साधारण वेब पेज नहीं बना रहा हूं, लेकिन एक बड़ा अनुप्रयोग है। यह अविश्वसनीय रूप से कष्टप्रद है क्योंकि आप गलत स्थान पर बैकस्पेस दबाए जाने के कारण केवल 10 मिनट का काम खो देते हैं। गलतियों को रोकने का अनुपात बनाम कष्टप्रद उपयोगकर्ताओं को बैकस्पेस कुंजी को नेविगेट करने से रोकते हुए 1000/1 से ऊपर का रास्ता होना चाहिए।

EDIT2: मैं इतिहास नेविगेशन, सिर्फ दुर्घटनाओं को रोकने की कोशिश नहीं कर रहा हूं ।

EDIT3: @brentonstrines ने टिप्पणी की (प्रश्न के इतना लोकप्रिय होने के बाद यहां ले जाया गया): यह एक दीर्घकालिक 'फिक्स' है, लेकिन आप वेबकिट में इस व्यवहार को बदलने के लिए क्रोमियम बग के पीछे अपना समर्थन फेंक सकते हैं

Comments

क्योंकि बैकस्पेस कुंजी अतिभारित है। आपने इस पर ध्यान नहीं दिया होगा, लेकिन आप शायद इसका उपयोग उन अक्षरों को मिटाने के लिए कर रहे हैं जो आपने अभी-अभी किसी पाठ क्षेत्र में टाइप किए हैं। मेरे कुछ ग्राहकों को इस बात से परेशानी हो रही है कि पेज को वापस जाना है, इसलिए यह उपयोगी जानकारी है। कोई भी नहीं लेकिन आप विदूषक जानते हैं कि बैकस्पेस को एक पृष्ठ वापस जाना चाहिए । यह कुछ ऐसा है जिसे मैं कभी नहीं जानता था, और यह एक ब्राउज़र के लिए एकमुश्त शत्रुतापूर्ण व्यवहार है। मुझे लगता है कि सभी पृष्ठों को उस व्यवहार को अक्षम करना चाहिए।

— ब्रेटन

लोगों को यह अजीब क्यों लगता है? नेविगेशन के लिए बैकस्पेस का उपयोग करना वास्तव में गूंगा शॉर्टकट है! ऐसे कई टेक्स्ट फ़ील्ड हैं, जिनसे उपयोगकर्ता टेक्स्ट को हटाना चाहते हैं - एक लंबा SO उत्तर होने की कल्पना करें, किसी चीज़ को जांचने के लिए दूसरी विंडो पर स्विच करें और फिर आप वापस आएं और एडिट एरिया पर गलत क्लिक करें, किसी शब्द को हटाने के लिए बैकस्पेस दबाएं और अचानक ब्राउज़र एक पृष्ठ पर वापस चला जाता है और आपने जो कुछ भी लिखा था उसे संभावित रूप से खो दिया है।

— पीटर बुफटन

मैं ऐसा क्यों करना चाहता हूं? मैं एक वेब साइट नहीं बल्कि एक वेब एप्लिकेशन बना रहा हूं। कुछ इनपुट फ़ील्ड केवल पढ़ने योग्य होते हैं, जिस स्थिति में वे संपादन योग्य दिखते हैं, लेकिन यदि आप बैकस्पेस दबाते हैं तो आप पृष्ठ छोड़ देते हैं। बैकस्पेस प्रेस का अनुपात वापस नेविगेट करने का इरादा है। बैकस्पेस प्रेस कुछ मिटाने की कोशिश कर रहा है, शायद

— 1/1000

सवाल यह है कि यह कैसे किया जाए, इस पर आपकी राय नहीं कि यह एक अच्छा विचार है या नहीं। परियोजना के विवरण को जाने बिना आपकी राय व्यर्थ है। मेरे ग्राहक ने विशेष रूप से मेरी परियोजनाओं में से एक के लिए इस व्यवहार का अनुरोध किया है और "आप कभी ऐसा क्यों करना चाहते हैं?" मददगार होगा।

— कोई नहीं

यह एक दीर्घकालिक 'फिक्स' है, लेकिन आप वेबकिट में इस व्यवहार को बदलने के लिए क्रोमियम बग के पीछे अपना समर्थन फेंक सकते हैं: code.google.com/p/chromium/issues/detail?id=144832

— brentonstrine

Answer 1

यह कोड समस्या को हल करता है, कम से कम IE और फ़ायरफ़ॉक्स (किसी अन्य का परीक्षण नहीं किया है, लेकिन मैं इसे काम करने का एक उचित मौका देता हूं यदि समस्या अन्य ब्राउज़रों में भी मौजूद है)।

// Prevent the backspace key from navigating back.
$(document).unbind('keydown').bind('keydown', function (event) {
    if (event.keyCode === 8) {
        var doPrevent = true;
        var types = ["text", "password", "file", "search", "email", "number", "date", "color", "datetime", "datetime-local", "month", "range", "search", "tel", "time", "url", "week"];
        var d = $(event.srcElement || event.target);
        var disabled = d.prop("readonly") || d.prop("disabled");
        if (!disabled) {
            if (d[0].isContentEditable) {
                doPrevent = false;
            } else if (d.is("input")) {
                var type = d.attr("type");
                if (type) {
                    type = type.toLowerCase();
                }
                if (types.indexOf(type) > -1) {
                    doPrevent = false;
                }
            } else if (d.is("textarea")) {
                doPrevent = false;
            }
        }
        if (doPrevent) {
            event.preventDefault();
            return false;
        }
    }
});

Comments

पासवर्ड फ़ील्ड को तोड़ता है।

— हेमलॉक

जैसा कि हेमलॉक ने कहा था - के लिए भी जाँच करें d.type.toUpperCase() === 'PASSWORD'। अन्यथा अच्छा लग रहा है

— stevendesu

चूंकि आप पहले से ही jQuery का उपयोग कर रहे हैंif( $(d).is( ":input" ) )...

— पॉल अलेक्जेंडर

यह बेकार है कि यह "बैक" कार्यक्षमता को ब्लैकलिस्ट करने में सक्षम होने के बजाय एक श्वेतसूची होना चाहिए। आप d.isContentEditableयहाँ के लिए एक चेक जोड़ना चाह सकते हैं ।

— आयन

मैंने वर्तमान में स्वीकृत उत्तर के स्वच्छ संस्करण के साथ एक एनपीएम परियोजना बनाई: github.com/slorber/backspace-disabler (यह भी सामग्री का समर्थन करता है और इसकी कोई निर्भरता नहीं है)

— सेबस्टियन लॉबर

Answer 2

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

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});

Comments

कृपया मेरे उदाहरण का परीक्षण करें, आप अपने कोड को तदनुसार अपडेट करना चाह सकते हैं।

— बिफ मागरिफ

मैं इसे @ erikkallen के समाधान पर पसंद करता हूं क्योंकि यह क्लीनर है। हालाँकि, मैं बटन, रेडियो बटन और चेक बॉक्स को भी नजरअंदाज करना चाहता था, इसलिए मैंने अगर () को इसमें बदल दिया:if(!rx.test(e.target.tagName) || $(e.target).is(':checkbox') || $(e.target).is(':radio') || $(e.target).is(':submit') || e.target.disabled || e.target.readOnly )

— मैथ्यू क्लार्क

@thetoolman, erikallen के उत्तर पर मेरी टिप्पणी देखें। इसका भी हिसाब होना चाहिए contentEditable।

— झटका

@MaffooClock: आप के साथ और अधिक संक्षिप्त हो सकता है.is(':checkbox,:radio,:submit')

— cdmckay

@cdmckay: मुझे विश्वास नहीं हो रहा है कि मैंने इसे उस तरह से नहीं लिखा था। सफाई के लिए धन्यवाद कि हम सभी के लिए :)

— मैथ्यू क्लार्क

Answer 3

यहाँ अन्य उत्तरों ने स्थापित किया है कि यह बिना सफ़ेद तत्वों के नहीं किया जा सकता है जिसमें बैकस्पेस की अनुमति है। यह समाधान आदर्श नहीं है क्योंकि श्वेतसूची केवल बनावट और पाठ / पासवर्ड इनपुट के रूप में सीधी नहीं है, लेकिन बार-बार अपूर्ण और अपडेट होने की आवश्यकता के लिए बार-बार पाया जाता है।

हालांकि, चूंकि बैकस्पेस कार्यक्षमता को दबाने का उद्देश्य केवल उपयोगकर्ताओं को गलती से डेटा खोने से रोकना है, इसलिए पहले से लोड समाधान एक अच्छा है क्योंकि मोडल पॉपअप आश्चर्यजनक है - जब मानक मानक के भाग के रूप में ट्रिगर किया जाता है तो मोडल पॉपअप खराब होते हैं, क्योंकि उपयोगकर्ता को उन्हें पढ़ने के बिना उन्हें खारिज करने की आदत होती है, और वे कष्टप्रद होते हैं। इस मामले में, मोडल पॉपअप केवल एक दुर्लभ और आश्चर्यजनक कार्रवाई के विकल्प के रूप में दिखाई देगा, और इसलिए स्वीकार्य है।

समस्या यह है कि जब भी उपयोगकर्ता पृष्ठ से दूर नेविगेट करता है (जैसे कि किसी लिंक पर क्लिक करते समय या फ़ॉर्म सबमिट करते समय), तो हमें एक onbeforeunload मोडल पॉप अप नहीं करना चाहिए, और हम विशिष्ट onbeunload शर्तों को श्वेतसूचीबद्ध या ब्लैकलिस्ट करना प्रारंभ नहीं करना चाहते हैं।

एक सामान्यीकृत समाधान के लिए ट्रेडऑफ़ का आदर्श संयोजन निम्नानुसार है: बैकस्पेस दबाया जाता है या नहीं, और यदि यह है तो ऑनबीफ्रोन्लोड मोडल को पॉप अप करें। दूसरे शब्दों में:

function confirmBackspaceNavigations () {
    // http://stackoverflow.com/a/22949859/2407309
    var backspaceIsPressed = false
    $(document).keydown(function(event){
        if (event.which == 8) {
            backspaceIsPressed = true
        }
    })
    $(document).keyup(function(event){
        if (event.which == 8) {
            backspaceIsPressed = false
        }
    })
    $(window).on('beforeunload', function(){
        if (backspaceIsPressed) {
            backspaceIsPressed = false
            return "Are you sure you want to leave this page?"
        }
    })
} // confirmBackspaceNavigations

यह IE7 +, फायरफॉक्स, क्रोम, सफारी और ओपेरा में काम करने के लिए परीक्षण किया गया है। इस फ़ंक्शन को अपने Global.js में छोड़ दें और इसे किसी भी पृष्ठ से कॉल करें जहाँ आप नहीं चाहते कि उपयोगकर्ता गलती से अपना डेटा खो दें।

ध्यान दें कि एक onbeforeunload मॉडल केवल एक बार चालू हो सकता है, इसलिए यदि उपयोगकर्ता फिर से बैकस्पेस दबाता है, तो मोडल फिर से फायर नहीं करेगा।

ध्यान दें कि यह हैशचेंज घटनाओं पर ट्रिगर नहीं होगा, हालांकि उस संदर्भ में आप उपयोगकर्ताओं को गलती से अपना डेटा खोने से रोकने के लिए अन्य तकनीकों का उपयोग कर सकते हैं।

Comments

मैं बस इसी समाधान को जोड़ने के लिए गया था और LOL पृष्ठ के नीचे इस पोस्ट को देखा। एक अंतर जो मेरे पास है अंतिम वापसी सेट करने के लिए = वापसी से पहले गलत = "क्या आपको यकीन है ..." कथन है, इसलिए यदि आप पॉपअप देखने के बाद बैक बटन पर क्लिक करते हैं तो आपको पॉपअप नहीं मिलता है (इसलिए यह गैर के अनुरूप है बैकस्पेस-प्रभावित व्यवहार)।

— डेविड रसेल

@ user2407309 मैंने अपने समाधान के साथ काम नहीं करने वाले फ़ायरफ़ॉक्स के बारे में अपनी टिप्पणी (शिकायत नहीं) को हटा दिया है। मेरी डिबगर के साथ एक समस्या थी। आपके कोड को संपादित / तोड़ने के लिए मेरी क्षमा याचना। मुझे अब एहसास हुआ कि मैंने अपनी सीमाएं (संपादन) को माफ़ कर दिया। मुझे वास्तव में खेद है और मुझे इस समस्या के आपके अद्भुत समाधान से कोई शिकायत नहीं है। फिर से, मेरी क्षमायाचना। यह कोड अच्छी तरह से काम करता है। मेरा मानना ​​है कि यह सबसे अच्छा जवाब है और मैं इसके लिए आपकी सराहना करता हूं।

— चार्ल्स ब्रेन

इस समाधान ने मेरी स्थानीय मशीन पर काम किया, लेकिन जब मैंने इसे स्थानांतरित किया, तो क्लाइंट (कम से कम उनमें से कुछ) ने आधे आवेदन की कार्यक्षमता खो दी। मुझे लगता है कि कुछ इसे अस्वीकार कर रहा है, लेकिन मुझे नहीं पता कि क्या है।

— स्टीव

@Steve, दुर्लभ या नहीं, अगर फ़ंक्शन में कोई समस्या है, तो वह जानकारी यहाँ है। मैं सिर्फ यह जानना चाहता हूं कि क्या वास्तव में कोई समस्या है।

— व्लादिमीर कोर्ना

अच्छा समाधान, लेकिन दुर्भाग्य से, अगर कोई उपयोगकर्ता गलती से बैकस्पेस को दो बार दबाता है, तो यह अभी भी वापस नेविगेट करता है। (कम से कम फ़ायरफ़ॉक्स पर)

— रेम्को डे ज़्वार्ट

Answer 4

एक और अधिक सुंदर / संक्षिप्त समाधान:

$(document).on('keydown',function(e){
  var $target = $(e.target||e.srcElement);
  if(e.keyCode == 8 && !$target.is('input,[contenteditable="true"],textarea'))
  {
    e.preventDefault();
  }
})

Comments

यह एक बहुत अधिक संक्षिप्त है और मैं जो कुछ भी बता सकता हूं, वह काम करता है। ऐसा क्यों है कि सबसे लोकप्रिय उत्तर में इनपुट के प्रकारों के लिए उन सभी की जांच है, और अधिक जटिल लगता है? क्या यह अधिक विश्वसनीय है?

— बजे

सबसे लोकप्रिय उत्तर प्रश्न का उत्तर देने वाला पहला था, इस प्रकार उच्च मत।

— डारवेने

जब आसानी से खेतों को फिर से हटा दिया जाता है तब भी क्रोम में विलीन होता है

— विल डी

Answer 5

विभिन्न इनपुट प्रकारों को संबोधित करने के लिए एरिकक्लेन के उत्तर का संशोधन

मैंने पाया है कि एक उद्यमी उपयोगकर्ता इसे खाली करने के लिए एक चेकबॉक्स या एक रेडियो बटन पर बैकस्पेस दबा सकता है और इसके बजाय वे पीछे की ओर नेविगेट करेंगे और अपना सारा डेटा खो देंगे।

इस परिवर्तन से उस समस्या का समाधान होना चाहिए।

सामग्री संपादन योग्य div को संबोधित करने के लिए नया संपादन

    //Prevents backspace except in the case of textareas and text inputs to prevent user navigation.
    $(document).keydown(function (e) {
        var preventKeyPress;
        if (e.keyCode == 8) {
            var d = e.srcElement || e.target;
            switch (d.tagName.toUpperCase()) {
                case 'TEXTAREA':
                    preventKeyPress = d.readOnly || d.disabled;
                    break;
                case 'INPUT':
                    preventKeyPress = d.readOnly || d.disabled ||
                        (d.attributes["type"] && $.inArray(d.attributes["type"].value.toLowerCase(), ["radio", "checkbox", "submit", "button"]) >= 0);
                    break;
                case 'DIV':
                    preventKeyPress = d.readOnly || d.disabled || !(d.attributes["contentEditable"] && d.attributes["contentEditable"].value == "true");
                    break;
                default:
                    preventKeyPress = true;
                    break;
            }
        }
        else
            preventKeyPress = false;

        if (preventKeyPress)
            e.preventDefault();
    });

---

उदाहरण
2 फ़ाइलें बनाने के लिए परीक्षण करें।

starthere.htm - इसे पहले खोलें ताकि आपके पास वापस जाने के लिए एक जगह हो

<a href="./test.htm">Navigate to here to test</a>

test.htm - यह बैकवर्ड को दबाएगा जब चेकबॉक्स या सबमिट फोकस (टैबिंग द्वारा प्राप्त) करते समय बैकस्पेस दबाया जाता है। मेरे कोड को ठीक करने के लिए बदलें।

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).keydown(function(e) {
        var doPrevent;
        if (e.keyCode == 8) {
            var d = e.srcElement || e.target;
            if (d.tagName.toUpperCase() == 'INPUT' || d.tagName.toUpperCase() == 'TEXTAREA') {
                doPrevent = d.readOnly || d.disabled;
            }
            else
                doPrevent = true;
        }
        else
            doPrevent = false;

        if (doPrevent)
            e.preventDefault();
    });
</script>
</head>
<body>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<input type="submit" />
</body>
</html>

Comments

आपने किस ब्राउज़र को रेडियो पर बैकस्पेस प्रेस देखा? चेकबॉक्स | सबमिट -> बैक फंक्शन मैंने एक ब्राउज़र को ऐसा करते देखा है ..

— Thetoolman

Internet Explorer 8 और क्रोम

— Biff MaGriff

मैंने इस धागे में कई अन्य समाधानों की कोशिश की, लेकिन इस एक ने मेरी सभी स्थितियों में अच्छा काम किया और सबसे साफ, सबसे आसान कोड समझा। धन्यवाद।

— एज़वर्ड

क्या आपने @Darwayne की कोशिश की मुझे यह जानने की उत्सुकता है कि ऐसा क्यों है कि यह बहुत छोटा है और यह अधिक जटिल है, लेकिन दोनों ही मेरे लिए एक ही काम करते हैं

— नियर

क्या यह लिंक पर काम करता है? किसी आइटम को निकालने के लिए मेरे पास एक छवि बटन के साथ ASP.Net अनुप्रयोग है। केवल यही एक चीज है जो अब तक काम नहीं की है ...

— स्टीव

Answer 6

टिप्पणियों के आधार पर ऐसा प्रतीत होता है कि आप फ़ॉर्म में जानकारी खोने वाले लोगों को रोकना चाहते हैं, यदि वे हटाने के लिए बैकस्पेस दबाते हैं, लेकिन फ़ील्ड केंद्रित नहीं है।

किस स्थिति में, आप ऑनलोड लोड हैंडलर को देखना चाहते हैं । स्टैक ओवरफ्लो इसका उपयोग करता है - यदि आपने एक पृष्ठ छोड़ने का प्रयास किया है जब आपने उत्तर लिखना शुरू किया है, तो यह एक चेतावनी को पॉप अप करता है।

Comments

खेद है कि एक असभ्य टिप्पणी थी। मेरा क्या मतलब है, उपयोगकर्ता शायद ऐसा कुछ करने के लिए शोकित नहीं होना चाहता है जिसे वे नहीं जानते थे कि वह गलत था। क्यों नहीं चुपचाप एक onkeydown के साथ कुंजी खाते हैं? लक्ष्य उपयोगकर्ता को पेज छोड़ने से पूरी तरह से रोकना नहीं है, लेकिन इस सामान्य गलती के खिलाफ रक्षा करना है। इसके अलावा, पॉप अप संवाद बहुत प्रभावी, या उपयोगी नहीं हैं। उपयोगकर्ता उन्हें नहीं पढ़ते हैं। क्या आप वाकई पेज को छोड़ना चाहते हैं? ठीक है! कोई प्रतीक्षा मत करो, मैं पृष्ठ छोड़ना नहीं चाहता था .. उफ़ बहुत देर हो गई।

— ब्रेटन

ठीक है तो ले लो या इसे छोड़ दो। मुझे लगता है कि आप एक ऐसी समस्या को खत्म करने की कोशिश कर रहे हैं जो वास्तव में मौजूद नहीं है, या कम से कम महत्वपूर्ण नहीं है। और मेरे अनुभव में, यह केवल बिजली उपयोगकर्ता हैं जो अपरिचित संवादों पर "ओके" पर क्लिक करते हैं, उन्हें ठीक से पढ़े बिना। ;)

— असंतुष्टGoatat

क्या आप और ब्रेटन एक ही व्यक्ति हैं? वैसे भी आप अपने आप को वहाँ पैर में गोली मारते हैं - लेख कहता है "डिफ़ॉल्ट उत्तर रद्द हो जाता है" इसलिए जब पृष्ठ छोड़ने के बारे में संवाद को देखते हुए, वे "रद्द करें" दबाए जा रहे हैं और इसलिए पृष्ठ को न छोड़ें। हालांकि यह ध्यान दिया जाना चाहिए कि उस संवाद पर क्रोम के विकल्प "इस पृष्ठ को छोड़ दें" और "इस पृष्ठ पर रहें" जो बहुत स्पष्ट हैं।

— दोपहर

नहीं, वह मैं नहीं हूं, लेकिन मैं इससे पहले उस लिंक पर आया हूं। मुझे लगता है कि टिप्पणियां उल्लसित हैं। "क्या !? लोग मोडल डायलॉग बॉक्स को नजरअंदाज करते हैं! हमें उन्हें लगातार और अधिक कष्टप्रद बनाने का रास्ता खोजना चाहिए!"। वास्तव में Microsoft सॉफ़्टवेयर के बारे में बहुत कुछ बताता है।

— ब्रेटन

@Disgruntled: नहीं, मैं ब्रेटन नहीं हूं, और लेख का बिंदु "डिफ़ॉल्ट विकल्प नहीं है ..." है, लेकिन "उपयोगकर्ता कुछ भी नहीं पढ़ते हैं।"

— erkkallen

Answer 7

इस कोड काम नेविगेट करने से रोकें!

$(document).on("keydown", function (event) {        
   if (event.keyCode === 8) {
      event.preventDefault();
    }
  });

लेकिन पाठ क्षेत्रों को प्रतिबंधित करने के लिए नहीं बल्कि अन्य

$(document).on("keydown", function (event) {
  if (event.which === 8 && !$(event.target).is("input, textarea")) {
   event.preventDefault();
  }
});

विशिष्ट क्षेत्र के लिए इसे रोकने के लिए बस उपयोग करें

$('#myOtherField').on("keydown", function (event) {
  if (event.keyCode === 8 || event.which === 8) { 
   event.preventDefault(); 
  } 
});

नीचे इस एक का जिक्र!

JQuery के साथ वापस नेविगेट करने से बैकस्पेस को रोकें (जैसे Google का होमपेज)

Answer 8

अधिकांश उत्तर jquery में हैं। आप इसे पूरी तरह से शुद्ध जावास्क्रिप्ट में कर सकते हैं, सरल और आवश्यक कोई लाइब्रेरी नहीं। यह लेख मेरे लिए एक अच्छा शुरुआती बिंदु था लेकिन चूंकि कीडेंटिफायर को हटा दिया गया है, मैं चाहता था कि यह कोड अधिक सुरक्षित हो, इसलिए मैंने कहा: e.keyCode == 8 से लेकर यदि कथन। इसके अलावा, कोड फ़ायरफ़ॉक्स पर अच्छी तरह से काम नहीं कर रहा था, इसलिए मैंने गलत रिटर्न जोड़ा ; और अब यह पूरी तरह से अच्छी तरह से काम करता है। यह रहा:

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+0008'||e.keyIdentifier=='Backspace'||e.keyCode==8){if(e.target==document.body){e.preventDefault();return false;}}},true);
</script>

यह कोड बहुत काम करता है क्योंकि,

1. यह शुद्ध जावास्क्रिप्ट (आवश्यक कोई पुस्तकालय नहीं) में है।
2. न केवल यह दबाए गए कुंजी की जांच करता है, यह पुष्टि करता है कि क्या कार्रवाई वास्तव में एक ब्राउज़र "बैक" कार्रवाई है।
3. उपरोक्त के साथ, उपयोगकर्ता बैक बटन कार्रवाई को रोकते हुए बिना किसी समस्या के वेब पेज पर इनपुट टेक्स्ट बॉक्स से टेक्स्ट टाइप और डिलीट कर सकता है।
4. यह छोटा, साफ, तेज और सीधे बिंदु पर है।

आप कंसोल.लॉग (ई) जोड़ सकते हैं; अपने परीक्षण के उद्देश्यों के लिए, और क्रोम में F12 को हिट करें, पृष्ठ पर "कंसोल" टैब और "बैकस्पेस" पर जाएं और इसे देखने के लिए अंदर देखें कि क्या मान लौटाए गए हैं, फिर आप उन सभी मापदंडों को लक्षित कर सकते हैं ताकि कोड को और बढ़ाया जा सके। अपनी आवश्यकताओं के अनुरूप ऊपर।

Answer 9

"द टॉलमैन" और& "बिफ मैग्रिफ" द्वारा दिए गए समाधानों का संयोजन

निम्न कोड IE 8 / मोज़िला / क्रोम में सही ढंग से काम करने लगता है

$(function () {
    var rx = /INPUT|TEXTAREA/i;
    var rxT = /RADIO|CHECKBOX|SUBMIT/i;

    $(document).bind("keydown keypress", function (e) {
        var preventKeyPress;
        if (e.keyCode == 8) {
            var d = e.srcElement || e.target;
            if (rx.test(e.target.tagName)) {
                var preventPressBasedOnType = false;
                if (d.attributes["type"]) {
                    preventPressBasedOnType = rxT.test(d.attributes["type"].value);
                }
                preventKeyPress = d.readOnly || d.disabled || preventPressBasedOnType;
            } else {preventKeyPress = true;}
        } else { preventKeyPress = false; }

        if (preventKeyPress) e.preventDefault();
    });
}); 

Comments

IMAGE जोड़ना भी उपयोगी हो सकता है।

— मृत्स्वदगे

मैं इस पर बस गया।

— Corentin

Answer 10

यह निश्चित नहीं है कि किसी ने भी इसका जवाब क्यों नहीं दिया - यह पूछने के लिए पूरी तरह से उचित तकनीकी प्रश्न लगता है कि क्या यह संभव है।

नहीं, मुझे नहीं लगता कि बैकस्पेस बटन को अक्षम करने का कोई क्रॉस-ब्राउज़र तरीका है। मुझे पता है कि यह इन दिनों FF में डिफ़ॉल्ट रूप से सक्षम नहीं है।

Comments

वास्तविक प्रश्न का उत्तर नहीं देने और समय बर्बाद करने के लिए माइनस 1

— एंड्रयू

Answer 11

यह समाधान उन अन्य लोगों के समान है जो पोस्ट किए गए हैं, लेकिन यह एक सरल श्वेतसूची का उपयोग करता है, जो आसानी से अनुकूलन को निर्दिष्ट तत्वों में बैकस्पेस को केवल .is () फ़ंक्शन में सेट करके अनुमति देता है।

मैं इस रूप में इसका उपयोग पृष्ठों पर बैकस्पेस को वापस नेविगेट करने से रोकने के लिए करता हूं:

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input:not([readonly]), textarea")) {
        e.preventDefault();
    }
});

Comments

जब उपयोगकर्ता सामग्री का उपयोग करता है, तो यह उसे अक्षम कर देगा। इसलिए आप श्वेतसूची में विवादास्पद = सत्य जोड़ना चाहते हैं

— मिगेल

Answer 12

@ Erikkallen के उत्कृष्ट उत्तर पर थोड़ा विस्तृत करने के लिए , यहां एक फ़ंक्शन है जो सभी कीबोर्ड-आधारित इनपुट प्रकारों की अनुमति देता है, जिनमें HTML5 में प्रस्तुत किए गए हैं :

$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;
    var INPUTTYPES = [
        "text", "password", "file", "date", "datetime", "datetime-local",
        "month", "week", "time", "email", "number", "range", "search", "tel",
        "url"];
    var TEXTRE = new RegExp("^" + INPUTTYPES.join("|") + "$", "i");
    if (event.keyCode === 8) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && d.type.match(TEXTRE)) ||
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        } else {
            doPrevent = true;
        }
    }
    if (doPrevent) {
        event.preventDefault();
    }
});

Comments

धन्यवाद, मैं इस उत्तर का उपयोग कर रहा हूं! क्या आपने इस समाधान के साथ अभी तक कोई समस्या पाई है?

— बजे

मैं समारोह से बाहर आने की घोषणा करता हूं, समारोह से बाहर घोषणाएं करता हूं ताकि वे हर कीडाउन घटना पर पुनर्गणना न करें।

— Thetoolman

Answer 13

जावास्क्रिप्ट - jQuery तरीका:

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input, textarea")) {
        e.preventDefault();
    }
});

जावास्क्रिप्ट - देशी तरीका, जो मेरे लिए काम करता है:

<script type="text/javascript">

//on backspace down + optional callback
function onBackspace(e, callback){
    var key;
    if(typeof e.keyIdentifier !== "undefined"){
        key = e.keyIdentifier;

    }else if(typeof e.keyCode !== "undefined"){
        key = e.keyCode;
    }
    if (key === 'U+0008' || 
        key === 'Backspace' || 
        key === 8) {
                    if(typeof callback === "function"){
                callback();
            }
            return true;
        }
    return false;
}

//event listener
window.addEventListener('keydown', function (e) {

    switch(e.target.tagName.toLowerCase()){
        case "input":
        case "textarea":
        break;
        case "body":
            onBackspace(e,function(){
                e.preventDefault();
            });

        break;
    }
}, true);
</script>

Comments

@MichaelPotter यह मेरे उपयोग के मामले के लिए ठीक था, बहुत समय पहले। कृपया, मेरे उत्तर में सुधार / परिवर्तन करके योगदान देने के लिए स्वतंत्र महसूस करें। धन्यवाद!

— व्लादिमीर ज्यूरिक

Answer 14

मेरे पास एक गैर-जेकरी उत्तर खोजने में कठिन समय था। मुझे ट्रैक पर रखने के लिए स्टास का धन्यवाद।

क्रोम: यदि आपको क्रॉस ब्राउज़र समर्थन की आवश्यकता नहीं है, तो आप केवल श्वेत सूची का उपयोग करके ब्लैक लिस्ट का उपयोग कर सकते हैं। यह शुद्ध जेएस संस्करण क्रोम में काम करता है, लेकिन आईई में नहीं। एफएफ के बारे में निश्चित नहीं है।

क्रोम में (पृष्ठ 36, 2014 के मध्य में), इनपुट या संतोषप्रद तत्व पर नहीं होने वाले कुंजीपट को लक्षित किया जाना प्रतीत होता है <BODY>। यह एक ब्लैकलिस्ट का उपयोग करना संभव बनाता है, जिसे मैं श्वेत सूची में रखना पसंद करता हूं। IE अंतिम क्लिक लक्ष्य का उपयोग करता है - इसलिए यह एक div या कुछ और हो सकता है। यह IE में बेकार बनाता है।

window.onkeydown = function(event) {
    if (event.keyCode == 8) {
    //alert(event.target.tagName); //if you want to see how chrome handles keypresses not on an editable element
        if (event.target.tagName == 'BODY') {
            //alert("Prevented Navigation");
            event.preventDefault();
        }
    }
}  

क्रॉस ब्राउज़र: शुद्ध जावास्क्रिप्ट के लिए, मुझे स्टास का उत्तर सबसे अच्छा लगा। संतोषप्रद के लिए एक और शर्त जाँच को जोड़कर यह मेरे लिए काम कर गया *:

document.onkeydown = function(e) {stopDefaultBackspaceBehaviour(e);}
document.onkeypress = function(e) {stopDefaultBackspaceBehaviour(e);}

function stopDefaultBackspaceBehaviour(event) {
    var event = event || window.event;
    if (event.keyCode == 8) {
        var elements = "HTML, BODY, TABLE, TBODY, TR, TD, DIV";
        var d = event.srcElement || event.target;
        var regex = new RegExp(d.tagName.toUpperCase());
        if (d.contentEditable != 'true') { //it's not REALLY true, checking the boolean value (!== true) always passes, so we can use != 'true' rather than !== true/
            if (regex.test(elements)) {
                event.preventDefault ? event.preventDefault() : event.returnValue = false;
            }
        }
    }
}

* ध्यान दें कि IEs [संपादित करें: और संयमी / TechPreview] में एक "सुविधा" है जो तालिका से संबंधित तत्वों को अप्राप्य बनाती है । यदि आप उनमें से एक पर क्लिक करते हैं और उन्हें बैकस्पेस दबाते हैं, तो यह वापस नेविगेट करेगा। यदि आपके पास संपादन योग्य नहीं है <td>, तो यह कोई समस्या नहीं है।

Answer 15

मुझे स्वीकृत समाधान और Select2.js प्लगइन के साथ कुछ समस्याएं थीं; मैं संपादन योग्य बॉक्स में वर्णों को हटाने में सक्षम नहीं था क्योंकि हटाने की कार्रवाई को रोका जा रहा था। यह मेरा समाधान था:

//Prevent backwards navigation when trying to delete disabled text.
$(document).unbind('keydown').bind('keydown', function (event) {

    if (event.keyCode === 8) {

        var doPrevent = false,
            d = event.srcElement || event.target,
            tagName = d.tagName.toUpperCase(),
            type = (d.type ? d.type.toUpperCase() : ""),
            isEditable = d.contentEditable,
            isReadOnly = d.readOnly,
            isDisabled = d.disabled;

        if (( tagName === 'INPUT' && (type === 'TEXT' || type === 'PASSWORD'))
            || tagName === 'PASSWORD'
            || tagName === 'TEXTAREA') {
            doPrevent =  isReadOnly || isDisabled;
        }
        else if(tagName === 'SPAN'){
            doPrevent = !isEditable;
        }
        else {
            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }
});

Select2 "contentEditable" की विशेषता के साथ एक स्पैन बनाता है जो इसमें संपादन योग्य कॉम्बो बॉक्स के लिए सही है। मैंने स्पैन टैगनाम और अलग-अलग विशेषता के लिए खाते को कोड जोड़ा। इससे मेरी सभी समस्याओं का समाधान हो गया।

संपादित करें: यदि आप jquery के लिए Select2 कॉम्बोबॉक्स प्लगइन का उपयोग नहीं कर रहे हैं, तो यह समाधान आपके द्वारा आवश्यक नहीं हो सकता है, और स्वीकृत समाधान बेहतर हो सकता है।

Answer 16

    document.onkeydown = function (e) {    
        e.stopPropagation();
        if ((e.keyCode==8  ||  e.keyCode==13) &&
            (e.target.tagName != "TEXTAREA") && 
            (e.target.tagName != "INPUT")) { 
            return false;
        }
    };

Comments

आपको झूठे का उपयोग नहीं करना चाहिए। e.preventDefault की सिफारिश की जाती है। इसके अलावा, आप हर कुंजी के लिए ईवेंट का प्रचार रोक रहे हैं, न कि केवल बैकस्पेस का। अंत में, कीकोड 13 दर्ज किया गया है और सवाल बैकस्पेस के साथ नेविगेशन को रोकने के बारे में था, लेकिन यह प्रवेश को फॉर्म जमा करने या अन्य कार्यों को करने से रोक देगा।

— कोई नहीं

Answer 17

यह कोड सभी ब्राउज़रों में समस्या को हल करता है:

onKeydown:function(e)
{
    if (e.keyCode == 8) 
    {
      var d = e.srcElement || e.target;
      if (!((d.tagName.toUpperCase() == 'BODY') || (d.tagName.toUpperCase() == 'HTML'))) 
      {
         doPrevent = false;
      }
       else
      {
         doPrevent = true;
      }
    }
    else
    {
       doPrevent = false;
    }
      if (doPrevent)
      {
         e.preventDefault();
       }

  }

Comments

मुझे लगता है कि यह कोड d.tagname होने DIVया होने के कारण अपेक्षित रूप से काम नहीं करता है TD।

— बिफ मागरिफ

हसीब अख्तर का कोड क्रोम और फ़ायरफ़ॉक्स में सही काम करता है, लेकिन आश्चर्य !! IE6-9 में नहीं कोई सुझाव?

— मार्टिन एंडरसन

Answer 18

बैकस्पेस दबाने पर नेविगेशन को रोकने का सबसे सरल तरीका

$(document).keydown(function () {
    if (event.keyCode == 8) {
        if (event.target.nodeName == 'BODY') {
            event.preventDefault();
        }
    }
});

Comments

बैकस्पैको दबाने पर नेविगेशन रोकता है, और एक ही समय में सभी इनपुट नियंत्रणों के साथ बैकस्पेस की अनुमति देता है

— मोहम्मद इरफान मयान

और पहली पंक्ति को याद न करें .. $ (दस्तावेज़) .keydown (फ़ंक्शन () {

— मोहम्मद इरफ़ान मयान

यह

— टेक्सटारस

Answer 19

Dojo टूलकिट 1.7 का उपयोग करना, यह IE 8 में काम करता है:

require(["dojo/on", "dojo/keys", "dojo/domReady!"],
function(on, keys) {
    on(document.body,"keydown",function(evt){if(evt.keyCode == keys.BACKSPACE)evt.preventDefault()});
});

Answer 20

क्या आपने केवल पढ़ने के लिए केवल पाठ फ़ील्ड में निम्नलिखित विशेषता जोड़ने का बहुत ही सरल समाधान आजमाया है:

onkeydown = "असत्य लौटाओ;"

यह ब्राउज़र को इतिहास में वापस जाने से रोकेगा जब बैकस्पेस कुंजी को केवल पाठ फ़ील्ड में पढ़ा जाता है। हो सकता है कि मैं आपके सच्चे इरादे को याद कर रहा हूं, लेकिन ऐसा लगता है कि यह आपके मुद्दे का सबसे सरल समाधान होगा।

Answer 21

एक बहुत अधिक समाधान -

$(document).on('keydown', function (e) {
    var key = e == null ? event.keyCode : e.keyCode;
    if(key == 8 && $(document.activeElement.is(':not(:input)')))   //select, textarea
      e.preventDefault();
});

वैकल्पिक रूप से, आप केवल तभी जाँच कर सकते हैं

$(document.activeElement).is('body')

Answer 22

शुद्ध जावास्क्रिप्ट संस्करण, जो सभी ब्राउज़रों में काम करता है:

document.onkeydown = function(e) {stopDefaultBackspaceBehaviour(e);}
document.onkeypress = function(e) {stopDefaultBackspaceBehaviour(e);}

function stopDefaultBackspaceBehaviour(event) {
  var event = event || window.event;
  if (event.keyCode == 8) {
    var elements = "HTML, BODY, TABLE, TBODY, TR, TD, DIV";
    var d = event.srcElement || event.target;
    var regex = new RegExp(d.tagName.toUpperCase());
    if (regex.test(elements)) {
      event.preventDefault ? event.preventDefault() : event.returnValue = false;
    }
  }
}

बेशक आप "INPUT, TEXTAREA" का उपयोग कर सकते हैं और "if (regex.test (elements))" का उपयोग कर सकते हैं। मेरे लिए पहला काम ठीक रहा।

Answer 23

प्रदर्शन?

मैं प्रदर्शन को लेकर चिंतित था और एक फिडेल बनाया: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/

var stresstest = function(e, method, index){...

मैंने इस धागे में पाए जाने वाले सबसे आशाजनक तरीकों का विश्लेषण किया है। यह पता चला है, वे सभी बहुत तेज थे और टाइप करते समय संभवतः "सुस्ती" के मामले में समस्या का कारण नहीं बनते हैं। सबसे धीमी विधि जिसे मैंने IE8 में 10.000 कॉल के लिए लगभग 125 एमएस में देखा था। जो कि 0.0125ms प्रति स्ट्रोक है।

मैंने कोडेनपाल और रॉबिन माबेन द्वारा पोस्ट किए गए तरीकों को सबसे तेज ~ 0.001ms (IE8) पाया लेकिन विभिन्न शब्दार्थों से सावधान रहें।

शायद यह किसी को इस तरह की कार्यक्षमता का परिचय देने के लिए उसके कोड के लिए एक राहत है।

Answer 24

संशोधित एरिकक्लेन जवाब:

$(document).unbind('keydown').bind('keydown', function (event) {

    var doPrevent = false, elem;

    if (event.keyCode === 8) {
        elem = event.srcElement || event.target;
        if( $(elem).is(':input') ) {
            doPrevent = elem.readOnly || elem.disabled;
        } else {
            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
        return false;
    }
});

Comments

एकदम सही जवाब। जो समाधान मुझे दूसरों से मिला, उसने फ़ायरफ़ॉक्स में काम नहीं किया, लेकिन यह पूरी तरह से तीनों (फ़ायरफ़ॉक्स, आईई और क्रोम) में बिना किसी समस्या के काम करता है। धन्यवाद Prozi

— निखिल दिनेश

Answer 25

परीक्षण करने पर यह समाधान बहुत अच्छा काम करता है।

मैंने इनपुट के साथ टैग नहीं किए गए कुछ इनपुट फ़ील्ड्स को संभालने के लिए कुछ कोड जोड़े, और Oracle PL / SQL एप्लिकेशन को एकीकृत करने के लिए जो मेरी नौकरी के लिए इनपुट फॉर्म जनरेट करता है।

मेरे दो सेंट":

 if (typeof window.event != ''undefined'')
    document.onkeydown = function() {
    //////////// IE //////////////
    var src = event.srcElement;
    var tag = src.tagName.toUpperCase();
    if (event.srcElement.tagName.toUpperCase() != "INPUT"
        && event.srcElement.tagName.toUpperCase() != "TEXTAREA"
        || src.readOnly || src.disabled 
        )
        return (event.keyCode != 8);
    if(src.type) {
       var type = ("" + src.type).toUpperCase();
       return type != "CHECKBOX" && type != "RADIO" && type != "BUTTON";
       }
   }
else
   document.onkeypress = function(e) {
   //////////// FireFox 
   var src = e.target;
   var tag = src.tagName.toUpperCase();
   if ( src.nodeName.toUpperCase() != "INPUT" && tag != "TEXTAREA"
      || src.readOnly || src.disabled )
      return (e.keyCode != 8);
    if(src.type) {
      var type = ("" + src.type).toUpperCase();
      return type != "CHECKBOX" && type != "RADIO" && type != "BUTTON";
      }                              
   }

Answer 26

मैंने वर्तमान में स्वीकृत (एरिकक्लेन के) स्वच्छ संस्करण के साथ एक एनपीएम परियोजना बनाई

https://github.com/slorber/backspace-disabler

यह मूल रूप से समान सिद्धांतों का उपयोग करता है लेकिन:

• कोई निर्भरता नहीं
• संतोषप्रद के लिए समर्थन
• अधिक पठनीय / रखरखाव योग्य कोड आधार
• का समर्थन किया जाएगा क्योंकि यह मेरी कंपनी द्वारा उत्पादन में उपयोग किया जाएगा
• एमआईटी लाइसेंस

---

var Backspace = 8;

// See http://stackoverflow.com/questions/12949590/how-to-detach-event-in-ie-6-7-8-9-using-javascript
function addHandler(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] = handler;
    }
}
function removeHandler(element, type, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
        element.detachEvent("on" + type, handler);
    } else {
        element["on" + type] = null;
    }
}




// Test wether or not the given node is an active contenteditable,
// or is inside an active contenteditable
function isInActiveContentEditable(node) {
    while (node) {
        if ( node.getAttribute && node.getAttribute("contenteditable") === "true" ) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}



var ValidInputTypes = ['TEXT','PASSWORD','FILE','EMAIL','SEARCH','DATE'];

function isActiveFormItem(node) {
    var tagName = node.tagName.toUpperCase();
    var isInput = ( tagName === "INPUT" && ValidInputTypes.indexOf(node.type.toUpperCase()) >= 0 );
    var isTextarea = ( tagName === "TEXTAREA" );
    if ( isInput || isTextarea ) {
        var isDisabled = node.readOnly || node.disabled;
        return !isDisabled;
    }
    else if ( isInActiveContentEditable(node) ) {
        return true;
    }
    else {
        return false;
    }
}


// See http://stackoverflow.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back
function disabler(event) {
    if (event.keyCode === Backspace) {
        var node = event.srcElement || event.target;
        // We don't want to disable the ability to delete content in form inputs and contenteditables
        if ( isActiveFormItem(node) ) {
            // Do nothing
        }
        // But in any other cases we prevent the default behavior that triggers a browser backward navigation
        else {
            event.preventDefault();
        }
    }
}


/**
 * By default the browser issues a back nav when the focus is not on a form input / textarea
 * But users often press back without focus, and they loose all their form data :(
 *
 * Use this if you want the backspace to never trigger a browser back
 */
exports.disable = function(el) {
    addHandler(el || document,"keydown",disabler);
};

/**
 * Reenable the browser backs
 */
exports.enable = function(el) {
    removeHandler(el || document,"keydown",disabler);
};

Answer 27

यहाँ शीर्ष मतदान के उत्तर को फिर से लिखना है। मैंने element.value! == को अपरिभाषित करने की कोशिश की (क्योंकि कुछ तत्वों की तरह कोई html विशेषता नहीं हो सकती है, लेकिन प्रोटोटाइप श्रृंखला पर कहीं कहीं एक जावास्क्रिप्ट मूल्य की संपत्ति हो सकती है), हालांकि यह बहुत अच्छी तरह से काम नहीं करती थी और बहुत सारे किनारे मामले होते थे। यह भविष्य के सबूत के लिए एक अच्छा तरीका नहीं लगता है, इसलिए एक श्वेतसूची सबसे अच्छा विकल्प लगता है।

यह ईवेंट बबल चरण के अंत में तत्व को पंजीकृत करता है, इसलिए यदि आप किसी भी कस्टम तरीके से बैकस्पेस को संभालना चाहते हैं, तो आप अन्य हैंडलर में ऐसा कर सकते हैं।

यह भी उदाहरण के लिए HTMLTextAreElement की जाँच करता है क्योंकि एक सैद्धांतिक रूप से एक वेब घटक हो सकता है जो उससे विरासत में मिला है।

यह contentEditable (अन्य उत्तरों के साथ गठबंधन) की जाँच नहीं करता है।

https://jsfiddle.net/af2cfjc5/15/

var _INPUTTYPE_WHITELIST = ['text', 'password', 'search', 'email', 'number', 'date'];

function backspaceWouldBeOkay(elem) {
    // returns true if backspace is captured by the element
    var isFrozen = elem.readOnly || elem.disabled;
    if (isFrozen) // a frozen field has no default which would shadow the shitty one
        return false;
    else {
        var tagName = elem.tagName.toLowerCase();
        if (elem instanceof HTMLTextAreaElement) // allow textareas
            return true;
        if (tagName=='input') { // allow only whitelisted input types
            var inputType = elem.type.toLowerCase();
            if (_INPUTTYPE_WHITELIST.includes(inputType))
                return true;
        }   
        return false; // everything else is bad
    }
}

document.body.addEventListener('keydown', ev => {
    if (ev.keyCode==8 && !backspaceWouldBeOkay(ev.target)) {
        //console.log('preventing backspace navigation');
        ev.preventDefault();
    }
}, true); // end of event bubble phase

Answer 28

साइट पॉइंट: जावास्क्रिप्ट के लिए वापस अक्षम करें

event.stopPropagation()और event.preventDefault()IE में कुछ भी नहीं है। मुझे यह काम करने के लिए event.keyCode == 11कहने के बजाय रिटर्न (मुझे सिर्फ कुछ चुनना था) भेजना था "if not = 8, run the event", हालाँकि। event.returnValue = falseभी काम करता है।

Answer 29

Jquery का उपयोग करते हुए एक और तरीका

    <script type="text/javascript">

    //set this variable according to the need within the page
    var BACKSPACE_NAV_DISABLED = true;

    function fnPreventBackspace(event){if (BACKSPACE_NAV_DISABLED && event.keyCode == 8) {return false;}}
    function fnPreventBackspacePropagation(event){if(BACKSPACE_NAV_DISABLED && event.keyCode == 8){event.stopPropagation();}return true;}

    $(document).ready(function(){ 
        if(BACKSPACE_NAV_DISABLED){
            //for IE use keydown, for Mozilla keypress  
            //as described in scr: http://www.codeproject.com/KB/scripting/PreventDropdownBackSpace.aspx
            $(document).keypress(fnPreventBackspace);
            $(document).keydown(fnPreventBackspace);

            //Allow Backspace is the following controls 
            var jCtrl = null;
            jCtrl = $('input[type="text"]');
            jCtrl.keypress(fnPreventBackspacePropagation);
            jCtrl.keydown(fnPreventBackspacePropagation);

            jCtrl = $('input[type="password"]');
            jCtrl.keypress(fnPreventBackspacePropagation);
            jCtrl.keydown(fnPreventBackspacePropagation);

            jCtrl = $('textarea');
            jCtrl.keypress(fnPreventBackspacePropagation);
            jCtrl.keydown(fnPreventBackspacePropagation);

            //disable backspace for readonly and disabled
            jCtrl = $('input[type="text"][readonly="readonly"]')
            jCtrl.keypress(fnPreventBackspace);
            jCtrl.keydown(fnPreventBackspace);

            jCtrl = $('input[type="text"][disabled="disabled"]')
            jCtrl.keypress(fnPreventBackspace);
            jCtrl.keydown(fnPreventBackspace);
        }
    }); 

    </script>

Comments

कृपया ध्यान दें कि यदि नियंत्रण (टेक्स्टबॉक्स) को गतिशील रूप से जोड़ा गया है तो यह काम नहीं करता है।

— कोडनैपल

Answer 30

मैं पिछले कुछ समय से अपने कोड में इसका उपयोग कर रहा हूं। मैं छात्रों के लिए ऑनलाइन परीक्षण लिखता हूं और समस्या में भाग गया जब छात्र अपने परीक्षण के दौरान बैकस्पेस दबा रहे थे और यह उन्हें लॉगिन स्क्रीन पर वापस ले जाएगा। निराशा होती! यह सुनिश्चित करने के लिए एफएफ पर काम करता है।

document.onkeypress = Backspace;
function Backspace(event) {
    if (event.keyCode == 8) {
        if (document.activeElement.tagName == "INPUT") {
            return true;
        } else {
            return false;
        }
    }
}