2014-04-18 19 views
5

Ich habe einen Eingang mit einer Mindestanzahl von Zeichen benötigt. Wenn ein Benutzer beginnt, etwas einzugeben und dann zu einem anderen Feld zu wechseln, ohne die erforderliche Mindestanzahl an Zeichen zu erreichen, möchte ich die Klasse eines Textes so ändern, dass er rot wird.Überprüfen, ob der Eingang den Fokus hat

Ich habe mit diesem Code versucht, wenn die Fokusänderung zu erkennen, aber es funktioniert nicht:

$scope.$watch(function(){ 
    return $('#job_desc').is(':active'); 
}, function(){ 
    console.log('test'); 
}) 

, was ist das Problem?

Vielen Dank

+0

hast du zusätzlich jquery zu deinem eckigen Projekt hinzugefügt oder verlässt dich auf jquery-lite von angular (standardmäßig)? – zwacky

+0

Ich habe auch jquery – Spearfisher

+0

Warum binden Sie nicht das Blur-Ereignis auf die erforderlichen Formularelemente? '$ ('. blurrable'). bind ('blur', function (evt) {...});' und wenn Sie es neu berechnen müssen, könnten Sie einen scope. $ apply() innerhalb des Blur-Event-Callbacks machen . – zwacky

Antwort

12

Wenn Sie mit AngularJS 1.2 Sie haben zwei Richtlinien, ob ein Feld den Fokus hat zu beobachten, um zu helfen: ng-Fokus und ng-Unschärfe. Wenn nicht, ist es ziemlich einfach, eigene Direktiven zu implementieren. Der Code (plunker).

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
     <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 

    <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <p>Hello {{name}}!</p> 
    <form> 
     <input ng-model="name" id="name" ng-focus="focused()" ng-blur="blurred()"> 
     <input ng-model="name2"> 
    </form> 
    </body> 

</html> 

und die Javascript-

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    $scope.focused = function() { 
    console.log("got focus"); 
    } 

    $scope.blurred = function() { 
    console.log("lost focus"); 
    } 
}); 

Wenn auf der anderen Seite, die Sie gerade Validierung wollen, Validierung aussehen in Form in AngularJS, so etwas wie myForm.myInput $ gültig. Angularjs setzt die Klassen ng-valid und ng-invalid entsprechend.

1

Sie können durch spezifischen Selektor auch wie folgt hören.

function listenForFocus() { 
    var el = angular.element(document.querySelectorAll('input, select')); 
    for (var i = 0; i < el.length; i++) { 
     var element = angular.element(el[i]); 
     element.bind('blur', function (e) { 
      console.log('blur'); 
     }); 
     element.bind('focus', function (e) { 
      console.log('focus'); 
     }); 
    } 
} 
Verwandte Themen