Im IE kann ich dies mit der (furchtbar nicht standardmäßigen, aber funktionierenden) jQuery tun
if ($.browser.msie)
$(document).keydown(function(e) { if (e.keyCode == 8) window.event.keyCode = 0;});
Aber ist es möglich, dies auf eine Weise zu tun, die unter Firefox funktioniert, oder auf eine browserübergreifende Weise, um einen Bonus zu erhalten?
Für die Aufzeichnung:
$(document).keydown(function(e) { if (e.keyCode == 8) e.stopPropagation(); });
tut nichts.
$(document).keydown(function(e) { if (e.keyCode == 8) e.preventDefault(); });
Behebt das Problem, macht jedoch die Rücktaste auf der Seite unbrauchbar, was noch schlimmer ist als das ursprüngliche Verhalten.
BEARBEITEN: Der Grund dafür ist, dass ich keine einfache Webseite erstelle, sondern eine große Anwendung. Es ist unglaublich ärgerlich, 10 Minuten Arbeit zu verlieren, nur weil Sie die Rücktaste an der falschen Stelle gedrückt haben. Das Verhältnis zwischen Fehlervermeidung und nervigen Benutzern sollte weit über 1000/1 liegen, indem verhindert wird, dass die Rücktaste zurück navigiert.
EDIT2: Ich versuche nicht , die Verlaufsnavigation zu verhindern, sondern nur Unfälle.
EDIT3: @ brentonstrines Kommentar (hierher verschoben, da die Frage so beliebt ist): Dies ist eine langfristige 'Korrektur', aber Sie könnten Ihre Unterstützung hinter den Chromium-Fehler werfen , um dieses Verhalten im Webkit zu ändern
quelle
Antworten:
Dieser Code löst das Problem, zumindest in IE und Firefox (habe keinen anderen getestet, aber ich gebe ihm eine vernünftige Chance zu arbeiten, wenn das Problem sogar in anderen Browsern besteht).
quelle
d.type.toUpperCase() === 'PASSWORD'
auch. Ansonsten sieht gut ausif( $(d).is( ":input" ) )...
d.isContentEditable
in hinzufügen .Dieser Code funktioniert in allen Browsern und verschluckt die Rücktaste, wenn er sich nicht in einem Formularelement befindet oder wenn das Formularelement deaktiviert ist | readOnly. Es ist auch effizient, was wichtig ist, wenn es für jeden eingegebenen Schlüssel ausgeführt wird.
quelle
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')
Die anderen Antworten hier haben gezeigt, dass dies nicht ohne Whitelist-Elemente möglich ist, in denen die Rücktaste zulässig ist. Diese Lösung ist nicht ideal, da die Whitelist nicht so einfach ist wie nur Textbereiche und Text- / Passworteingaben, sondern wiederholt als unvollständig befunden wird und aktualisiert werden muss.
Da der Zweck der Unterdrückung der Backspace-Funktionalität lediglich darin besteht, zu verhindern, dass Benutzer versehentlich Daten verlieren, ist die Lösung vor dem Herunterladen eine gute Lösung, da das modale Popup überraschend ist - modale Popups sind schlecht, wenn sie als Teil eines Standard-Workflows ausgelöst werden. weil der Benutzer sich daran gewöhnt, sie zu entlassen, ohne sie zu lesen, und sie nerven. In diesem Fall erscheint das modale Popup nur als Alternative zu einer seltenen und überraschenden Aktion und ist daher akzeptabel.
Das Problem ist, dass ein Onbeforeunload-Modal nicht angezeigt werden darf, wenn der Benutzer von der Seite weg navigiert (z. B. beim Klicken auf einen Link oder beim Senden eines Formulars), und wir nicht damit beginnen möchten, bestimmte Onbeforeunload-Bedingungen auf die Whitelist zu setzen oder auf die schwarze Liste zu setzen.
Die ideale Kombination von Kompromissen für eine verallgemeinerte Lösung lautet wie folgt: Verfolgen Sie, ob die Rücktaste gedrückt wird, und öffnen Sie das Onbeforeunload-Modal nur, wenn dies der Fall ist. Mit anderen Worten:
Dies wurde getestet, um in IE7 +, FireFox, Chrome, Safari und Opera zu funktionieren. Legen Sie diese Funktion einfach in Ihrer Datei global.js ab und rufen Sie sie von einer beliebigen Seite aus auf, auf der Benutzer nicht versehentlich ihre Daten verlieren sollen.
Beachten Sie, dass ein Onbeforeunload-Modal nur einmal ausgelöst werden kann. Wenn der Benutzer also erneut die Rücktaste drückt, wird das Modal nicht erneut ausgelöst.
Beachten Sie, dass dies bei Hashchange-Ereignissen nicht ausgelöst wird. In diesem Zusammenhang können Sie jedoch andere Techniken verwenden, um zu verhindern, dass Benutzer versehentlich ihre Daten verlieren.
quelle
Eine elegantere / prägnantere Lösung:
quelle
Änderung der Antwort von erikkallen, um verschiedene Eingabetypen anzusprechen
Ich habe festgestellt, dass ein unternehmungslustiger Benutzer bei einem vergeblichen Versuch, es zu löschen, die Rücktaste auf einem Kontrollkästchen oder einem Optionsfeld drücken könnte. Stattdessen würde er rückwärts navigieren und alle seine Daten verlieren.
Diese Änderung sollte dieses Problem beheben.
Neue Bearbeitung, um inhaltsbearbeitbare Divs zu adressieren
Beispiel
Zum Testen machen Sie 2 Dateien.
starthere.htm - öffne dies zuerst, damit du einen Ort hast, zu dem du zurückkehren kannst
test.htm - Dies navigiert rückwärts, wenn die Rücktaste gedrückt wird, während das Kontrollkästchen oder das Senden den Fokus hat (erreicht durch Tabulieren). Ersetzen Sie durch meinen Code, um zu beheben.
quelle
Basierend auf den Kommentaren scheint es, dass Sie verhindern möchten, dass Personen Informationen in Formularen verlieren, wenn sie zum Löschen die Rücktaste drücken, das Feld jedoch nicht fokussiert ist.
In diesem Fall möchten Sie sich den Ereignishandler onunload ansehen . Stack Overflow verwendet es. Wenn Sie versuchen, eine Seite zu verlassen, wenn Sie mit dem Schreiben einer Antwort begonnen haben, wird eine Warnung angezeigt.
quelle
Stoppen Sie die Navigation in diesem Code funktioniert!
Aber um nicht Textfelder einzuschränken, sondern andere
Um dies für ein bestimmtes Feld zu verhindern, verwenden Sie einfach
Bezugnehmend auf dieses unten!
Verhindern Sie, dass BACKSPACE mit jQuery zurück navigiert (wie die Google-Startseite).
quelle
Die meisten Antworten sind in jquery. Sie können dies perfekt in reinem Javascript tun, einfach und ohne Bibliothek. Dieser Artikel war ein guter Ausgangspunkt für mich, aber da keyIdentifier veraltet ist, wollte ich, dass dieser Code sicherer ist, und fügte der if-Anweisung || e.keyCode == 8 hinzu . Außerdem funktionierte der Code in Firefox nicht gut, daher habe ich return false hinzugefügt . und jetzt funktioniert es perfekt. Hier ist es:
Dieser Code funktioniert gut, weil,
quelle
Kombinieren von Lösungen von "thetoolman" && "Biff MaGriff"
Der folgende Code scheint in IE 8 / Mozilla / Chrome korrekt zu funktionieren
quelle
Ich bin mir nicht sicher, warum niemand dies gerade beantwortet hat - scheint eine völlig vernünftige technische Frage zu sein, ob es möglich ist.
Nein, ich glaube nicht, dass es eine browserübergreifende Möglichkeit gibt, die Rücktaste zu deaktivieren. Ich weiß, dass es heutzutage in FF nicht standardmäßig aktiviert ist.
quelle
Diese Lösung ähnelt anderen, die veröffentlicht wurden, verwendet jedoch eine einfache Whitelist, die leicht anpassbar ist, um die Rücktaste in bestimmten Elementen zuzulassen, indem Sie einfach den Selektor in der Funktion .is () festlegen.
Ich verwende es in dieser Form, um zu verhindern, dass die Rücktaste auf den Seiten zurück navigiert:
quelle
Um die hervorragende Antwort von @ erikkallen etwas näher zu erläutern , finden Sie hier eine Funktion, die alle tastaturbasierten Eingabetypen zulässt, einschließlich der in HTML5 eingeführten :
quelle
JavaScript - jQuery Weg:
Javascript - der native Weg, der für mich funktioniert:
quelle
Es fiel mir schwer, eine Antwort zu finden, die nicht von JQUERY stammt. Vielen Dank an Stas, der mich auf die Strecke gebracht hat.
Chrome: Wenn Sie keine browserübergreifende Unterstützung benötigen, können Sie statt einer Whitelist nur eine Blacklist verwenden. Diese reine JS-Version funktioniert in Chrome, jedoch nicht im IE. Ich bin mir nicht sicher über FF.
In Chrome (Version 36, Mitte 2014) scheinen Tastendrücke, die nicht auf eine Eingabe oder ein inhaltsbearbeitbares Element gerichtet sind, gezielt zu sein
<BODY>
. Dies ermöglicht die Verwendung einer Blacklist, die ich der Whitelist vorziehe. IE verwendet das Ziel für den letzten Klick - es kann sich also um ein Div oder etwas anderes handeln. Das macht dies im IE nutzlos.Cross Browser: Für reines Javascript fand ich die Antwort von Stas die beste. Durch Hinzufügen einer weiteren Bedingungsprüfung für contenteditable funktionierte dies für mich *:
* Beachten Sie, dass IEs [edit: und Spartan / TechPreview] eine "Funktion" haben, die tabellenbezogene Elemente unbearbeitbar macht . Wenn Sie auf eine dieser Optionen klicken und dann die Rücktaste drücken, wird zurück navigiert. Wenn Sie keine bearbeitbaren
<td>
s haben, ist dies kein Problem.quelle
Ich hatte einige Probleme mit der akzeptierten Lösung und dem Select2.js-Plugin. Ich konnte keine Zeichen in der bearbeitbaren Box löschen, da die Löschaktion verhindert wurde. Das war meine Lösung:
Select2 erstellt einen Span mit dem Attribut "contentEditable", das für das bearbeitbare Kombinationsfeld darin auf "true" gesetzt ist. Ich habe Code hinzugefügt, um den Bereich tagName und das andere Attribut zu berücksichtigen. Dies löste alle meine Probleme.
Bearbeiten: Wenn Sie das Combobox-Plugin Select2 nicht für jquery verwenden, wird diese Lösung möglicherweise nicht von Ihnen benötigt, und die akzeptierte Lösung ist möglicherweise besser.
quelle
quelle
Dieser Code löst das Problem in allen Browsern:
quelle
DIV
oder istTD
.Einfachste Möglichkeit, die Navigation beim Drücken der Rücktaste zu verhindern
quelle
Mit Dojo Toolkit 1.7 funktioniert dies in IE 8:
quelle
Haben Sie die sehr einfache Lösung ausprobiert, einfach das folgende Attribut zu Ihrem schreibgeschützten Textfeld hinzuzufügen:
onkeydown = "return false;"
Dadurch wird verhindert, dass der Browser in den Verlauf zurückkehrt, wenn die Rücktaste in einem schreibgeschützten Textfeld gedrückt wird. Vielleicht fehlt mir Ihre wahre Absicht, aber dies scheint die einfachste Lösung für Ihr Problem zu sein.
quelle
Eine viel sauberere Lösung -
Alternativ können Sie nur prüfen, ob
quelle
Reine Javascript-Version, die in allen Browsern funktioniert:
Natürlich können Sie dann "INPUT, TEXTAREA" und dann "if (! Regex.test (elements))" verwenden. Das erste hat gut für mich funktioniert.
quelle
Performance?
Ich machte mir Sorgen um die Leistung und machte eine Geige: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/
Ich habe die vielversprechendsten Methoden analysiert, die ich in diesem Thread gefunden habe. Es stellte sich heraus, dass sie alle sehr schnell waren und höchstwahrscheinlich kein Problem in Bezug auf "Trägheit" beim Tippen verursachen. Die langsamste Methode, die ich mir angesehen habe, war ungefähr 125 ms für 10.000 Aufrufe in IE8. Das sind 0,0125 ms pro Hub.
Ich fand die von Codenepal und Robin Maben veröffentlichten Methoden am schnellsten ~ 0,001 ms (IE8), aber Vorsicht vor der unterschiedlichen Semantik.
Vielleicht ist dies eine Erleichterung für jemanden, der diese Art von Funktionalität in seinen Code einführt.
quelle
Geänderte erikkallen Antwort:
quelle
Diese Lösung hat beim Testen sehr gut funktioniert.
Ich habe Code hinzugefügt, um einige Eingabefelder zu verarbeiten, die nicht mit Eingaben versehen sind, und um sie in eine Oracle PL / SQL-Anwendung zu integrieren, die ein Eingabeformular für meinen Job generiert.
Meine zwei Cent":
quelle
Ich habe ein NPM-Projekt mit einer sauberen Version der aktuell akzeptierten (von erikkallen) erstellt.
https://github.com/slorber/backspace-disabler
Es verwendet im Grunde die gleichen Prinzipien, aber:
quelle
Hier ist meine Neufassung der am besten bewerteten Antwort. Ich habe versucht, element.value! == undefined zu überprüfen (da einige Elemente wie möglicherweise kein HTML-Attribut haben, aber möglicherweise irgendwo in der Prototypenkette eine Javascript-Werteigenschaft haben), aber das hat nicht sehr gut funktioniert und viele Randfälle. Es scheint keinen guten Weg zu geben, dies zukunftssicher zu machen, daher scheint eine Whitelist die beste Option zu sein.
Dadurch wird das Element am Ende der Ereignisblasenphase registriert. Wenn Sie also die Rücktaste auf benutzerdefinierte Weise behandeln möchten, können Sie dies in anderen Handlern tun.
Dies prüft auch die Instanz von HTMLTextAreElement, da theoretisch eine Webkomponente vorhanden sein könnte, die davon erbt.
Dies überprüft contentEditable nicht (kombiniert mit anderen Antworten).
https://jsfiddle.net/af2cfjc5/15/
quelle
Sitepoint: Zurück für Javascript deaktivieren
event.stopPropagation()
undevent.preventDefault()
nichts im IE tun. Ich musste eine Rücksendung sendenevent.keyCode == 11
(ich habe gerade etwas ausgewählt), anstatt nur zu sagen"if not = 8, run the event"
, dass es funktioniert.event.returnValue = false
funktioniert auch.quelle
Eine andere Methode mit jquery
quelle
Ich benutze dies seit einiger Zeit in meinem Code. Ich schreibe Online-Tests für Schüler und bin auf das Problem gestoßen, als die Schüler während ihres Tests die Rücktaste gedrückt haben und sie zum Anmeldebildschirm zurückkehren. Frustrierend! Es funktioniert auf FF sicher.
quelle