Jak mogę zapobiec cofnięciu się klawisza Backspace?

W IE mogę to zrobić za pomocą (okropnie niestandardowego, ale działającego) jQuery

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

Ale czy można to zrobić w sposób, który działa w przeglądarce Firefox lub w przeglądarce, aby uzyskać bonus?

Dla przypomnienia:

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

nic nie robi.

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

rozwiązuje problem, ale sprawia, że ​​klawisz Backspace nie nadaje się do użytku na stronie, co jest nawet gorsze niż oryginalne zachowanie.

EDYCJA: Powodem tego jest to, że nie tworzę prostej strony internetowej, ale dużą aplikację. Bardzo denerwujące jest tracenie 10 minut pracy tylko dlatego, że nacisnąłeś backspace w niewłaściwym miejscu. Stosunek zapobiegania błędom do irytujących użytkowników powinien być znacznie powyżej 1000/1, uniemożliwiając cofanie się klawisza Backspace.

EDIT2: Ja nie próbuje zapobiec nawigację historię, tylko wypadków.

EDIT3: @brentonstrines komentarz (przeniesiony tutaj, ponieważ pytanie jest tak popularne): Jest to długoterminowa „poprawka”, ale możesz rzucić swoje poparcie za błędem Chromium, aby zmienić to zachowanie w zestawie internetowym

Ten kod rozwiązuje problem, przynajmniej w IE i Firefox (nie testowałem żadnego innego, ale daję mu rozsądną szansę na działanie, jeśli problem istnieje nawet w innych przeglądarkach).

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

Ten kod działa we wszystkich przeglądarkach i połyka klawisz Backspace, gdy nie ma go w elemencie formularza lub jeśli element formularza jest wyłączony | tylko do odczytu. Jest również wydajny, co jest ważne, gdy wykonuje się na każdym wpisanym kluczu.

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

Inne odpowiedzi tutaj wykazały, że nie można tego zrobić bez elementów białej listy, w których dozwolony jest Backspace. To rozwiązanie nie jest idealne, ponieważ biała lista nie jest tak prosta jak zwykłe pola tekstowe i wprowadzanie tekstu / hasła, ale wielokrotnie okazuje się, że jest niekompletna i wymaga aktualizacji.

Ponieważ jednak tłumienie funkcji backspace ma jedynie na celu zapobieżenie przypadkowej utracie danych przez użytkowników, rozwiązanie beforeunload jest dobre, ponieważ wyskakujące okno modalne jest zaskakujące - wyskakujące okna modalne są złe, gdy są uruchamiane w ramach standardowego przepływu pracy, ponieważ użytkownik przyzwyczaja się do ich odrzucania bez ich czytania i są denerwujące. W tym przypadku wyskakujące okno modalne pojawiłoby się jedynie jako alternatywa dla rzadkiej i zaskakującej akcji, a zatem jest akceptowalne.

Problem polega na tym, że modal onbeforeunload nie może się pojawiać, ilekroć użytkownik opuści stronę (na przykład po kliknięciu linku lub przesłaniu formularza), i nie chcemy zaczynać na białej liście lub na czarnej liście określonych warunków onbeforeunload.

Idealna kombinacja kompromisów dla uogólnionego rozwiązania jest następująca: śledź, czy wciśnięty jest backspace, i wyświetlaj modal onbeforeunload, jeśli tak jest. Innymi słowy:

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

Zostało to przetestowane pod kątem działania w IE7 +, FireFox, Chrome, Safari i Opera. Po prostu upuść tę funkcję w pliku global.js i wywołaj ją z dowolnej strony, na której nie chcesz, aby użytkownicy przypadkowo utracili swoje dane.

Zauważ, że modal onbeforeunload można uruchomić tylko raz, więc jeśli użytkownik ponownie naciśnie backspace, modal nie uruchomi się ponownie.

Pamiętaj, że nie spowoduje to uruchomienia zdarzeń haszowania, jednak w tym kontekście możesz użyć innych technik, aby zapobiec przypadkowej utracie danych przez użytkowników.

Bardziej eleganckie / zwięzłe rozwiązanie:

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

Modyfikacja odpowiedzi erikkallen w celu uwzględnienia różnych typów danych wejściowych

Przekonałem się, że przedsiębiorczy użytkownik może naciskać klawisz Backspace na polu wyboru lub przycisk radiowy w próżnej próbie wyczyszczenia go, a zamiast tego nawigowałby wstecz i tracił wszystkie swoje dane.

Ta zmiana powinna rozwiązać ten problem.

Nowa edycja do obsługi edytowalnych elementów 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();
    });

Przykład
Aby przetestować, utwórz 2 pliki.

starthere.htm - otwórz ten pierwszy, aby mieć miejsce, do którego można wrócić

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

test.htm - Nawiguje do tyłu po naciśnięciu klawisza Backspace, gdy pole wyboru lub przesłanie jest aktywne (osiągane poprzez tabulacja). Zamień na mój kod, aby to naprawić.

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

Na podstawie komentarzy wydaje się, że chcesz powstrzymać ludzi przed utratą informacji w formularzach, jeśli naciśnie klawisz Backspace, aby je usunąć, ale pole nie jest aktywne.

W takim przypadku chcesz spojrzeć na moduł obsługi zdarzeń onunload . Stos przepełnienia stosuje go - jeśli spróbujesz opuścić stronę, gdy zacząłeś pisać odpowiedź, pojawi się ostrzeżenie.

Przestań nawigować po tym kodzie działa!

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

Ale żeby nie ograniczać pól tekstowych, ale innych

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

Aby temu zapobiec, po prostu użyj

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

Odnosząc się do tego poniżej!

Zapobiegaj cofaniu się BACKSPACE z powrotem za pomocą jQuery (jak na stronie głównej Google)

Większość odpowiedzi znajduje się w jquery. Możesz to zrobić doskonale w czystym JavaScript, prosty i bez biblioteki. Ten artykuł był dla mnie dobrym punktem wyjścia, ale ponieważ keyIdentifier jest przestarzały, chciałem, aby ten kod był bardziej bezpieczny, dlatego dodałem || e.keyCode == 8 do instrukcji if. Ponadto kod nie działał dobrze w przeglądarce Firefox, więc dodałem return false; a teraz działa idealnie dobrze. Oto on:

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

Ten kod działa świetnie, ponieważ

1. Jest w czystym javascript (nie wymaga biblioteki).
2. Nie tylko sprawdza naciśnięty klawisz, ale potwierdza, czy akcja jest tak naprawdę działaniem „wstecznym” przeglądarki.
3. Wraz z powyższym użytkownik może bez problemu wpisywać i usuwać tekst z pól tekstowych na stronie internetowej, jednocześnie zapobiegając działaniu przycisku Wstecz.
4. Jest krótki, czysty, szybki i od razu do rzeczy.

Możesz dodać console.log (e); dla celów testowych i wciśnij F12 w chrome, przejdź do zakładki „konsola” i wciśnij „backspace” na stronie i zajrzyj do środka, aby zobaczyć, jakie wartości są zwracane, a następnie możesz kierować wszystkie te parametry, aby dodatkowo ulepszyć kod powyżej w zależności od potrzeb.

Łączenie rozwiązań „thetoolman” i& „Biff MaGriff”

poniższy kod wydaje się działać poprawnie w IE 8 / Mozilla / Chrome

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

Nie jestem pewien, dlaczego nikt nie odpowiedział na to pytanie - wydaje się całkowicie rozsądnym pytaniem technicznym, aby zapytać, czy to możliwe.

Nie, nie sądzę, aby istniał sposób umożliwiający przeglądanie stron w celu wyłączenia przycisku Backspace. Wiem, że obecnie nie jest domyślnie włączona w FF.

To rozwiązanie jest podobne do innych, które zostały opublikowane, ale wykorzystuje prostą białą listę, dzięki czemu można go łatwo dostosować, aby umożliwić cofanie w określonych elementach, po prostu ustawiając selektor w funkcji .is ().

Używam go w tym formularzu, aby zapobiec cofaniu się backspace na stronach:

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

Aby nieco rozwinąć doskonałą odpowiedź @ erikkallen , oto funkcja, która pozwala na wszystkie typy wprowadzania oparte na klawiaturze, w tym te wprowadzone w 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();
    }
});

JavaScript - sposób jQuery:

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

JavaScript - natywny sposób, który działa dla mnie:

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

Trudno mi było znaleźć odpowiedź inną niż JQUERY. Dzięki Staśowi za umieszczenie mnie na torze.

Chrom: jeśli nie potrzebujesz obsługi wielu przeglądarek, możesz po prostu użyć czarnej listy zamiast białej listy. Ta czysta wersja JS działa w Chrome, ale nie w IE. Nie jestem pewien co do FF.

W Chrome (wer. 36, połowa 2014 r.) Wydaje się, że są one naciskane na klawisze, których nie ma na danych wejściowych ani na elementach, które można zadowolić <BODY>. Umożliwia to korzystanie z czarnej listy, którą wolę od białej listy. IE używa celu ostatniego kliknięcia - może to być div lub cokolwiek innego. To sprawia, że ​​jest to bezużyteczne w 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();
        }
    }
}  

Cross Browser: Dla czystego javascript, odpowiedź Stasia była najlepsza. Dodanie jeszcze jednego warunku sprawdzania zawartości sprawiło, że zadziałało to dla mnie *:

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

* Należy pamiętać, że IE [edit: i Spartan / TechPreview] mają „funkcję”, która sprawia, że elementy związane z tabelą są nieedytowalne . Jeśli klikniesz jeden z nich, a następnie Naciśniesz backspace, przejdzie on wstecz. Jeśli nie masz edytowalnych <td>plików, nie stanowi to problemu.

Miałem pewne problemy z zaakceptowanym rozwiązaniem i wtyczką Select2.js; Nie byłem w stanie usunąć znaków z edytowalnego pola, ponieważ akcja usuwania była uniemożliwiona. To było moje rozwiązanie:

//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 tworzy zakres z atrybutem „contentEditable”, który jest ustawiony na true dla edytowalnego pola kombi w nim. Dodałem kod, aby uwzględnić zakres tagName i inny atrybut. To rozwiązało wszystkie moje problemy.

Edycja: Jeśli nie używasz wtyczki Select2 combobox do jquery, to rozwiązanie może nie być potrzebne, a zaakceptowane rozwiązanie może być lepsze.

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

Ten kod rozwiązuje problem we wszystkich przeglądarkach:

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

  }

Najprostszy sposób, aby zapobiec nawigacji po naciśnięciu klawisza Backspace

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

Przy użyciu pakietu narzędzi Dojo 1.7 działa to w 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()});
});

Czy wypróbowałeś bardzo proste rozwiązanie polegające na dodaniu następującego atrybutu do pola tekstowego tylko do odczytu:

onkeydown = "return false;"

Zapobiegnie to cofnięciu się przeglądarki do historii po naciśnięciu klawisza Backspace w polu tekstowym tylko do odczytu. Może brakuje mi twojej prawdziwej intencji, ale wydaje się, że byłoby to najprostsze rozwiązanie twojego problemu.

Znacznie lepsze rozwiązanie -

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

Alternatywnie możesz tylko sprawdzić, czy

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

Wersja czystego javascript, która działa we wszystkich przeglądarkach:

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

Oczywiście możesz użyć „INPUT, TEXTAREA” i użyć „if (! Regex.test (elements))”. Pierwszy działał dobrze dla mnie.

Występ?

Martwiłem się wydajnością i zrobiłem skrzypce: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/

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

Przeanalizowałem najbardziej obiecujące metody, które znalazłem w tym wątku. Okazuje się, że wszystkie były bardzo szybkie i najprawdopodobniej nie powodują problemu pod względem „powolności” podczas pisania. Najwolniejsza metoda, jaką obejrzałem, to około 125 ms dla 10.000 wywołań w IE8. Co wynosi 0,0125 ms na skok.

Odkryłem, że metody opublikowane przez Codenepala i Robina Mabena są najszybsze ~ 0,001 ms (IE8), ale uważaj na inną semantykę.

Być może jest to ulga dla kogoś, kto wprowadza tego rodzaju funkcje do swojego kodu.

Zmodyfikowana odpowiedź erikkallen:

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

To rozwiązanie działało bardzo dobrze podczas testowania.

Dodałem trochę kodu do obsługi niektórych pól wejściowych nieoznaczonych danymi wejściowymi i do integracji z aplikacją Oracle PL / SQL, która generuje formularz wejściowy dla mojego zadania.

Moje dwa centy":

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

Stworzyłem projekt NPM z czystą wersją aktualnie akceptowanego (erikkallen)

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

Wykorzystuje w zasadzie te same zasady, ale:

• Bez zależności
• Wsparcie dla zadowolonych
• Bardziej czytelna / łatwa w obsłudze baza kodu
• Będzie wspierany, ponieważ będzie wykorzystywany w produkcji przez moją firmę
• Licencja MIT

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

Oto moje przepisane na najczęściej głosowaną odpowiedź. Próbowałem sprawdzić element.value! == undefined (ponieważ niektóre elementy, takie jak mogą nie mieć atrybutu html, ale mogą mieć właściwość wartości javascript gdzieś w łańcuchu prototypów), jednak nie działało to zbyt dobrze i miało wiele przypadków krawędzi. Wydaje się, że nie ma dobrego sposobu na zabezpieczenie tego na przyszłość, więc biała lista wydaje się najlepszą opcją.

Rejestruje to element na końcu fazy bąbelkowej zdarzenia, więc jeśli chcesz obsługiwać Backspace w dowolny niestandardowy sposób, możesz to zrobić w innych programach obsługi.

Sprawdza to również wystąpienie HTMLTextAreElement, ponieważ teoretycznie można mieć komponent internetowy, który dziedziczy po nim.

Nie sprawdza to contentEditable (w połączeniu z innymi odpowiedziami).

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

Punkt serwisowy: wyłącz ponownie dla Javascript

event.stopPropagation()i event.preventDefault()nie rób nic w IE. Musiałem jednak wysłać zwrot event.keyCode == 11(właśnie coś wybrałem) zamiast po prostu powiedzieć, "if not = 8, run the event"że to działa. event.returnValue = falsedziała również.

Inna metoda wykorzystująca 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>

Używam tego w moim kodzie już od jakiegoś czasu. Piszę testy online dla studentów i napotkałem problem, gdy uczniowie naciskali klawisz Backspace podczas testu i zabrałoby ich to z powrotem do ekranu logowania. Denerwujący! Na pewno działa na FF.

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