Geri silme tuşunun geri gitmesini nasıl önleyebilirim?

IE üzerinde bunu (korkunç standart dışı, ama çalışma) jQuery ile yapabilirsiniz

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

Ancak Firefox'ta çalışan bir şekilde veya bonus için tarayıcılar arası bir şekilde yapmak mümkün mü?

Kayıt için:

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

hiç birşey yapmıyor.

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

sorunu çözer, ancak geri silme tuşunu sayfada kullanılamaz hale getirir, bu da orijinal davranıştan daha da kötüdür.

EDIT: Bunu yapmak nedeni basit bir web sayfası değil büyük bir uygulama oluşturmak olmasıdır. Yanlış yere geri bastığınız için 10 dakikalık işi kaybetmek inanılmaz derecede can sıkıcı. Hataların önlenmesi ile sinir bozucu kullanıcılar arasındaki oran, geri silme tuşunun geri gitmesini engelleyerek 1000/1'in çok üzerinde olmalıdır.

EDIT2: Geçmişte gezinmeyi engellemeye çalışmıyorum , sadece kazalar.

EDIT3: @brentonstrines yorum (soru çok popüler olduğu için buraya taşındı): Bu uzun vadeli bir 'düzeltme', ancak webkit'teki bu davranışı değiştirmek için desteğinizi Chromium hatasının arkasına atabilirsiniz

Bu kod, en azından IE ve Firefox'ta sorunu çözer (başkalarını test etmedim, ancak sorun diğer tarayıcılarda bile mevcutsa çalışma şansı verdim).

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

Bu kod, tüm tarayıcılarda çalışır ve bir form öğesinde değilken veya form öğesi devre dışı bırakılırsa geri silme tuşunu yutar | readOnly. Aynı zamanda etkilidir, bu da yazılan her anahtar üzerinde yürütülürken önemlidir.

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

Buradaki diğer cevaplar, bunun Backspace'e izin verilen beyaz liste öğeleri olmadan yapılamayacağını belirledi. Bu çözüm ideal değildir, çünkü beyaz liste yalnızca textareas ve metin / şifre girişleri kadar basit değildir, ancak tekrar tekrar eksik ve güncellenmesi gerektiği bulunmuştur.

Bununla birlikte, arka boşluk işlevselliğini bastırmanın amacı kullanıcıların yalnızca yanlışlıkla veri kaybetmesini önlemek olduğundan, önceki yükleme çözümü iyi bir çözümdür, çünkü kalıcı açılır pencere şaşırtıcıdır - kalıcı açılır pencereler standart bir iş akışının bir parçası olarak tetiklendiğinde kötüdür, çünkü kullanıcı onları okumadan işten çıkarmaya alışır ve can sıkıcıdır. Bu durumda, kalıcı açılır pencere yalnızca nadir ve şaşırtıcı bir eyleme alternatif olarak görünecektir ve bu nedenle kabul edilebilir.

Sorun, kullanıcı sayfadan her uzaklaştığında (örneğin bir bağlantıyı tıklarken veya bir form gönderirken olduğu gibi) bir onbeforeload modunun açılmaması ve önceden yüklenme koşullarında belirli beyaz listeye veya kara listeye başlamak istemiyoruz.

Genelleştirilmiş bir çözüm için dengesizliklerin ideal kombinasyonu aşağıdaki gibidir: geri tuşuna basıp basılmadığını takip edin ve yalnızca onbeforeunload modunu açın. Diğer bir deyişle:

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 +, FireFox, Chrome, Safari ve Opera'da çalıştığı test edilmiştir. Bu işlevi global.js'nize bırakın ve kullanıcıların yanlışlıkla verilerini kaybetmesini istemediğiniz herhangi bir sayfadan çağırın.

Önceden yüksüz bir modun yalnızca bir kez tetiklenebileceğini unutmayın, bu nedenle kullanıcı tekrar geri tuşuna basarsa mod tekrar ateşlenmez.

Bunun hashchange olaylarında tetiklenmeyeceğini unutmayın, ancak bu bağlamda kullanıcıların yanlışlıkla verilerini kaybetmesini önlemek için başka teknikler kullanabilirsiniz.

Daha zarif / özlü bir çözüm:

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

Erikkallen'in cevabının değişik giriş tiplerine cevap vermesi

Girişimci bir kullanıcının boşaltma girişiminde bir onay kutusuna veya radyo düğmesine geri basabileceğini ve bunun yerine geriye doğru gidip tüm verilerini kaybedeceğini buldum.

Bu değişiklik bu konuyu ele almalıdır.

Yeni içerik düzenlenebilir div'lere yönelik düzenleme

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

Örnek
2 dosyayı test etmek için.

starthere.htm - geri dönmek için bir yeriniz olması için önce bunu açın

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

test.htm - Onay kutusu veya gönderme odaktayken (sekme ile elde edilir) geri tuşuna basıldığında geriye doğru gider. Düzeltmek için kodumla değiştirin.

<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>

Görünen yorumlara göre, silmek için geri tuşuna basarlarsa ancak alan odaklanmazsa, formlardaki bilgileri kaybetmelerini durdurmak istersiniz.

Bu durumda onunload olay işleyicisine bakmak istersiniz . Yığın Taşması kullanır - bir yanıt yazmaya başladığınızda bir sayfadan ayrılmaya çalışırsanız bir uyarı görüntülenir.

Bu kod gezinme durdurmak çalışır!

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

Ancak metin alanlarını değil diğerlerini kısıtlamak için

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

Belirli bir alanda kullanılmasını önlemek için

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

Aşağıdakilere atıfta bulunarak!

BACKSPACE'in jQuery ile geri dönmesini engelleyin (Google'ın Ana Sayfası gibi)

Cevapların çoğu jquery'de. Bunu saf Javascript, basit ve hiçbir kütüphane gerekli mükemmel yapabilirsiniz. Bu makale benim için iyi bir başlangıç ​​noktasıydı, ancak keyIdentifier kullanımdan kaldırıldığı için if koduna || e.keyCode == 8 eklediğim için bu kodun daha güvenli olmasını istedim . Ayrıca, kod Firefox üzerinde iyi çalışmadığı için return false ekledim ; ve şimdi çok iyi çalışıyor. İşte burada:

<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>

Bu kod harika çalışıyor çünkü,

1. Saf javascripttedir (kütüphane gerekmez).
2. Sadece basılan tuşu kontrol etmekle kalmaz, aynı zamanda eylemin gerçekten bir tarayıcı "geri" eylemi olduğunu doğrular.
3. Yukarıdakilerle birlikte, kullanıcı geri düğmesi işlemini engellerken web sayfasındaki giriş metin kutularına sorunsuz bir şekilde metin yazabilir ve silebilir.
4. Kısa, temiz, hızlı ve doğrudan doğruya.

Console.log (e) ekleyebilirsiniz; test amaçlarınız için ve kromda F12 tuşuna basın, "konsol" sekmesine gidin ve sayfadaki "geri" tuşuna basın ve hangi değerlerin döndürüldüğünü görmek için içine bakın, ardından kodu daha da geliştirmek için tüm bu parametreleri hedefleyebilirsiniz ihtiyaçlarınızı karşılamak için yukarıda.

"Thetoolman" && "Biff MaGriff" tarafından verilen çözümlerin birleştirilmesi

Aşağıdaki kod IE 8 / Mozilla / Chrome'da doğru çalışıyor gibi görünüyor

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

Kimsenin bunu neden yanıtlamadığından emin değilim - bunun mümkün olup olmadığını sormak için mükemmel makul bir teknik soru gibi görünüyor.

Hayır, geri silme düğmesini devre dışı bırakmanın çapraz tarayıcı yolu olduğunu sanmıyorum. Bu günlerde FF'de varsayılan olarak etkin olmadığını biliyorum.

JQUERY olmayan bir cevap bulmakta zorlandım. Beni yolda bıraktığı için Stas'a teşekkürler.

Chrome: Çapraz tarayıcı desteğine ihtiyacınız yoksa, beyaz listeleme yerine yalnızca bir kara liste kullanabilirsiniz. Bu saf JS sürümü Chrome'da çalışır, ancak IE'de çalışmaz. FF hakkında emin değilim.

Chrome'da (sürüm 36, 2014 ortası), bir girişte veya içerikte bulunulan öğede olmayan tuşlara basılması hedeflenmiş gibi görünüyor <BODY>. Bu, beyaz listeye eklemeyi tercih ettiğim bir kara liste kullanmayı mümkün kılar. IE son tıklama hedefini kullanır - bu nedenle bir div veya başka bir şey olabilir. Bu IE'de işe yaramaz hale getirir.

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

Çapraz Tarayıcı: Saf javascript için, Stas'ın cevabının en iyisi olduğunu gördüm. İçeriğe uygun hale getirmek için bir koşul kontrolü daha eklemek benim için işe yaradı *:

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

* IE'lerde [edit: ve Spartan / TechPreview], tablo ile ilgili öğeleri düzenlenemeyen bir "özellik" bulunduğunu unutmayın . Bunlardan birini tıklar ve SONRA geri tuşuna basarsanız geri gider. Düzenlenebilir özellikleriniz yoksa <td>, bu bir sorun değildir.

Bu çözüm, yayınlanan diğerlerine benzer, ancak yalnızca .is () işlevinde seçiciyi ayarlayarak belirli öğelerde geri aralığa izin vermek için kolayca özelleştirilebilir hale getiren basit bir beyaz liste kullanır.

Bu formda, sayfalardaki geri aramanın geri gitmesini önlemek için kullanıyorum:

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

@ Erikkallen'in mükemmel cevabını biraz ayrıntılandırmak için , HTML5'te tanıtılanlar da dahil olmak üzere tüm klavye tabanlı giriş türlerine izin veren bir işlev :

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

JavaScript - jQuery yolu:

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

Javascript - benim için çalışan yerel yol:

<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>

Kabul edilen çözüm ve Select2.js eklentisiyle ilgili bazı sorunlar yaşadım; Silme işlemi engellendiği için düzenlenebilir kutudaki karakterleri silemedim. Bu benim çözümümdü:

//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, düzenlenebilir birleşik giriş kutusu için true olarak ayarlanan "contentEditable" özniteliğine sahip bir Span oluşturur. Kod tagName ve farklı özniteliğini hesaba eklemek için kod ekledim. Bu tüm sorunlarımı çözdü.

Düzenleme: jquery için Select2 birleşik giriş eklentisi kullanmıyorsanız, bu çözüm sizin tarafınızdan gerekli olmayabilir ve kabul edilen çözüm daha iyi olabilir.

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

Bu kod sorunu tüm tarayıcılarda çözer:

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

  }

Geri tuşuna basarak navigasyonu önlemenin en kolay yolu

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

Dojo araç seti 1.7 kullanarak, bu IE 8'de çalışır:

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

Salt okunur metin alanınıza aşağıdaki özelliği eklemenin çok basit bir çözümünü denediniz mi:

onkeydown = "dönüş yanlış;"

Bu, salt okunur bir metin alanında Geri tuşuna basıldığında tarayıcının geçmişe geri dönmesini engeller. Belki gerçek niyetinizi özlüyorum, ancak bu, sorununuz için en basit çözüm gibi görünüyor.

Çok daha temiz bir çözüm -

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

Alternatif olarak, yalnızca

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

Tüm tarayıcılarda çalışan saf javascript sürümü:

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

Tabii ki "INPUT, TEXTAREA" ve sonra "if (! Regex.test (elements))" kullanabilirsiniz. İlk benim için iyi çalıştı.

Verim?

Performans konusunda endişeliydim ve bir keman yaptım: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/

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

Bu iş parçacığında bulduğum en umut verici yöntemleri analiz ettim. Görünüşe göre hepsi çok hızlıydı ve büyük olasılıkla yazarken "durgunluk" açısından bir soruna neden olmuyor. Baktığım en yavaş Yöntem IE8'deki 10.000 Çağrı için yaklaşık 125 ms idi. Hangi İnme başına 0.0125ms.

Codenepal ve Robin Maben tarafından gönderilen yöntemleri en hızlı ~ 0.001ms (IE8) olarak buldum, ancak farklı semantiğe dikkat edin.

Belki de bu, bu tür işlevselliği koduna tanıtan birine rahatlamadır.

Değiştirilmiş erikkallen cevabı:

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

Bu çözüm test edildiğinde çok iyi çalıştı.

Ben girdi ile etiketlenmemiş bazı girdi alanlarını işlemek ve işim için bir giriş formu üreten bir Oracle PL / SQL uygulaması entegre etmek için bazı kod ekledim.

Benim görüşüm":

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

Şu anda kabul edilen (erikkallen) temiz bir sürümüyle bir NPM projesi oluşturdum

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

Temel olarak aynı ilkeleri kullanır, ancak:

• Bağımlılık yok
• İçerik düzeltilebilir destek
• Daha okunabilir / bakımı kolay kod tabanı
• Şirketim tarafından üretimde kullanılacağı için desteklenecek
• MIT lisansı

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

İşte en çok oy alan cevabı yeniden yazmam. Element.value! == undefined'i kontrol etmeye çalıştım (çünkü bazı öğeler html özniteliğine sahip olmayabilir, ancak prototip zincirinde bir yerde bir javascript değeri özelliğine sahip olabilir), ancak bu çok iyi çalışmadı ve çok sayıda kenar durumu vardı. Bunu geleceğe hazırlamanın iyi bir yolu yok gibi görünüyor, bu nedenle bir beyaz liste en iyi seçenek gibi görünüyor.

Bu, olay kabarcık aşamasının sonundaki öğeyi kaydeder, bu nedenle Backspace'i herhangi bir özel şekilde işlemek istiyorsanız, bunu diğer işleyicilerde yapabilirsiniz.

Bu, HTMLTextAreElement örneğini de denetler, çünkü teorik olarak bundan devralan bir web bileşeni olabilir.

Bu, contentEditable'ı kontrol etmez (diğer cevaplarla birleştirin).

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

Sitepoint: Javascript için geri devre dışı bırak

event.stopPropagation()ve event.preventDefault()IE'de hiçbir şey yapma. Gerçi event.keyCode == 11, sadece "if not = 8, run the event"çalışmasını söylemek yerine (sadece bir şey seçtim) dönüş göndermek zorunda kaldı . event.returnValue = falseayrıca çalışır.

Jquery kullanan başka bir yöntem

    <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>

Bunu bir süredir kodumda kullanıyorum. Öğrenciler için çevrimiçi testler yazdım ve öğrenciler sınavları sırasında geri tuşuna bastıklarında sorunla karşılaştım ve giriş ekranına geri dönecekti. Sinir bozucu! Kesinlikle FF üzerinde çalışır.

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