Verhindern Sie die Rücktaste aus der Navigation zurück in AngularJS

Ich angesichts dieses Problem in meinem AngularJS webapp.

Wenn ein Nutzer eine Seite mit einem Formular zu füllen, und er beginnt zu schreiben, wenn er drückt die backspace-Taste und der Fokus ist nicht auf die Eingabe von text, dann wird die Seite geht, um den vorherigen Zustand.

Schaute ich diese Lösung Verwendung von jQuery, aber es scheint nicht der geeignete Weg zur Erreichung dieses in AngularJS.

InformationsquelleAutor gyss | 2015-03-12
  1. 9

    Es ist $document in angular js:

    angular.module('yourModule', [])
  .controller('yourController', ['$scope', '$document', function($scope, $document) {
      $document.on('keydown', function(e){
          if(e.which === 8 && ( e.target.nodeName !== "INPUT" && e.target.nodeName !== "SELECT" ) ){ //you can add others here inside brackets.
              e.preventDefault();
          }
      });

    }
  ]);

    Plnkr Demo.

    Sehen Sie in der demo habe ich nur für "INPUT" nodeName und es nicht verhindern, dass die Vorgabe der "backspace" - Taste auf die text-Eingabe aber nicht auf textarea weil wir noch nicht behandelt ist es in dem Zustand.

    • Es funktioniert nicht, weil der Elementare Logik-Fehler.
    • wie kommt es, dass Elementare Fehler? offen gesagt, dies ist nur für backspace und jeder elem, ob es Eingabe-oder auswählen.
    • einfach nur neugierig zu wissen, ist es etwas, das in eine Webseite, wo Sie sich konzentrieren können zwei Elemente zur gleichen Zeit, da afaik nicht möglich. Also mit && ausfällt.
    • Sehen Sie, Tolja zusammen Antwort. e.die === 8 && e.Ziel.nodeName !== "INPUT" || e.Ziel.nodeName !== "WÄHLEN Sie" ist äquivalent zu (e.die === 8 && e.Ziel.nodeName !== "INPUT") || e.Ziel.nodeName !== "WÄHLEN", es ist also wahr, was die Taste gedrückt, wenn e.Ziel.nodeName !== "WÄHLEN.
    • sollten Sie überlegen, editierbaren tags auch in der if-Bedingung. if (- e.die === 8 && !e.Ziel.isContentEditable && (!rx.test(e.Ziel.tagName) || e.Ziel.deaktiviert || e.Ziel.readOnly)) { e.preventDefault(); }
    InformationsquelleAutor Jai
  2. 9

    Kann ich nicht kommentieren "akzeptierte Antwort", aber es funktioniert nicht richtig, als Bedingung 

    e.which === 8 && e.target.nodeName !== "INPUT" || e.target.nodeName !== "SELECT"

    mit Logik-Fehler, so dass Sie verwenden können,

    e.which === 8 && e.target.nodeName !== "INPUT" && e.target.nodeName !== "SELECT"

    oder Antwort, schrieb @ThisIsMarkSantiago.

    InformationsquelleAutor Anatolii Chmykhalo
  3. 2

    Fügen Sie das Skript unten in euren controller

    var rx = /INPUT|SELECT|TEXTAREA/i;

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

    Oder Sie können die Jquery -

      $(function(){
      var regx = /INPUT|SELECT|TEXTAREA/i;

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

    Bekam ich diese Antwort hier:
    Wie kann ich das deaktivieren der backspace-Taste drücken, die auf allen Browsern?

    $(document).keydown(function(e) {
    var nodeName = e.target.nodeName.toLowerCase();

    if (e.which === 8) {
        if ((nodeName === 'input' && e.target.type === 'text') ||
            nodeName === 'textarea') {
            //do nothing
        } else {
            e.preventDefault();
        }
    }
});

    Nur legte es in Ihre Steuerung.

    • Es scheint eine ziemlich saubere Lösung. Aber ich hab schon das es die Arbeit mit jQuery. Die Idee ist, lösen Sie diese mit AngularJS, wenn es möglich ist...
    • Winkel-intern verwendet jqLite. Trotzdem für diese brauchen Sie nur zu schreiben javascript.
    • Ich kann nicht Rücktaste auf Passwort-Feld, und ich weiß nicht, den === operator. Ich Update es mit: if ((nodeName == 'input' && (e.Ziel.type == 'text' || e.Ziel.Typ == 'Passwort')) || nodeName == 'textarea') {
    InformationsquelleAutor ThisIsMarkSantiago
Schreibe einen Kommentar