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
źródło
Odpowiedzi:
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).
źródło
d.type.toUpperCase() === 'PASSWORD'
również. Poza tym wygląda dobrzeif( $(d).is( ":input" ) )...
d.isContentEditable
.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.
źródło
if(!rx.test(e.target.tagName) || $(e.target).is(':checkbox') || $(e.target).is(':radio') || $(e.target).is(':submit') || e.target.disabled || e.target.readOnly )
contentEditable
..is(':checkbox,:radio,:submit')
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:
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.
źródło
Bardziej eleganckie / zwięzłe rozwiązanie:
źródło
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
Przykład
Aby przetestować, utwórz 2 pliki.
starthere.htm - otwórz ten pierwszy, aby mieć miejsce, do którego można wrócić
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ć.
źródło
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.
źródło
Przestań nawigować po tym kodzie działa!
Ale żeby nie ograniczać pól tekstowych, ale innych
Aby temu zapobiec, po prostu użyj
Odnosząc się do tego poniżej!
Zapobiegaj cofaniu się BACKSPACE z powrotem za pomocą jQuery (jak na stronie głównej Google)
źródło
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:
Ten kod działa świetnie, ponieważ
źródło
Łączenie rozwiązań „thetoolman” i& „Biff MaGriff”
poniższy kod wydaje się działać poprawnie w IE 8 / Mozilla / Chrome
źródło
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.
źródło
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:
źródło
Aby nieco rozwinąć doskonałą odpowiedź @ erikkallen , oto funkcja, która pozwala na wszystkie typy wprowadzania oparte na klawiaturze, w tym te wprowadzone w HTML5 :
źródło
JavaScript - sposób jQuery:
JavaScript - natywny sposób, który działa dla mnie:
źródło
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.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 *:
* 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.źródło
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:
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.
źródło
źródło
Ten kod rozwiązuje problem we wszystkich przeglądarkach:
źródło
DIV
lubTD
.Najprostszy sposób, aby zapobiec nawigacji po naciśnięciu klawisza Backspace
źródło
Przy użyciu pakietu narzędzi Dojo 1.7 działa to w IE 8:
źródło
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.
źródło
Znacznie lepsze rozwiązanie -
Alternatywnie możesz tylko sprawdzić, czy
źródło
Wersja czystego javascript, która działa we wszystkich przeglądarkach:
Oczywiście możesz użyć „INPUT, TEXTAREA” i użyć „if (! Regex.test (elements))”. Pierwszy działał dobrze dla mnie.
źródło
Występ?
Martwiłem się wydajnością i zrobiłem skrzypce: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/
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.
źródło
Zmodyfikowana odpowiedź erikkallen:
źródło
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":
źródło
Stworzyłem projekt NPM z czystą wersją aktualnie akceptowanego (erikkallen)
https://github.com/slorber/backspace-disabler
Wykorzystuje w zasadzie te same zasady, ale:
źródło
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/
źródło
Punkt serwisowy: wyłącz ponownie dla Javascript
event.stopPropagation()
ievent.preventDefault()
nie rób nic w IE. Musiałem jednak wysłać zwrotevent.keyCode == 11
(właśnie coś wybrałem) zamiast po prostu powiedzieć,"if not = 8, run the event"
że to działa.event.returnValue = false
działa również.źródło
Inna metoda wykorzystująca jquery
źródło
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.
źródło