ng-init Text des Eingabeelements auswählen

Wenn ein Benutzer ein Kontrollkästchen aktiviert/deaktiviert, setze ich var edit = true/false. Ich habe ein Eingabefeld, das bei der Eingabe von wahr/falsch angezeigt wird. Ich möchte den Textwert des Eingabefeldes immer dann auswählen, wenn die Textfelder angezeigt werden.ng-init Text des Eingabeelements auswählen

HTML:

<div ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 
    <input type="checkbox" ng-model="edit" ng-init="edit = true"> 
    <div ng-bind="edit"></div> 
    <div ng-if="edit"> 
     <input type="text" select-text ng-model="name" size="30" placeholder="New Name" /> 
    </div> 
    </div> 
</div>

JS:

var myApp = angular.module('myApp', []); 
myApp.controller('MyCtrl', ['$scope', function($scope) { 
    $scope.name = "Johny"; 

}]); 

myApp.directive('selectText', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, elem, attrs, ctrl) { 
     elem.bind('focus', function() { 
      $(elem).select(); 
     }); 
     $(elem).focus();   
    } 
    }; 
});

Ich habe Schwierigkeiten beim Fokus-Ereignis von Textfeld in Aufrufen, wenn es angezeigt wird.

http://jsfiddle.net/pnnzb5sm/2/

Quelle

2017-05-02 Ashwin

'$ (Elem) .focus();' bereits fokussiert das Element. Soweit ich weiß gibt es kein 'Select' Event –

Ich habe es $watch mit, so dass, wenn edit es aktualisieren nennen es

Versuchen Sie, diese

<html> 
 
<head> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
</script> 
 

 
\t <script> 
 
\t var myApp = angular.module('myApp', []); 
 
myApp.controller('MyCtrl', ['$scope', function($scope) { 
 
    $scope.name = "Johny"; 
 

 
}]); 
 

 
myApp.directive('selectText', function() { 
 
    return { 
 
    require: 'ngModel', 
 
    link: function(scope, elem, attrs, ctrl) { 
 
     elem.bind('focus', function() { 
 
      $(elem).select(); 
 
     }); 
 
     scope.$watch("edit",function(newValue,oldValue) { 
 
     //This gets called when data changes. 
 
      $(elem).select(); 
 
     }); 
 

 
     $(elem).focus(); 
 
    } 
 
    }; 
 
}); 
 
\t </script> 
 

 

 
</head> 
 
<body> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <input type="checkbox" ng-model="edit" ng-init="edit = true"> 
 
    <div ng-bind="edit"></div> 
 
    <div ng-if="edit"> 
 
     <input type="text" select-text ng-model="name" size="30" placeholder="New Name" /> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-05-02 11:54:51

Verwendung dieses

if (!$window.getSelection().toString()) { 
    this.setSelectionRange(0, this.value.length) 
}

Demo

var myApp = angular.module('myApp', []); 
 
myApp.controller('MyCtrl', ['$scope', function($scope) { 
 
    $scope.name = "Johny"; 
 

 
}]); 
 

 
myApp.directive('selectText', function($window) { 
 
    return { 
 
    require: 'ngModel', 
 
    link: function(scope, elem, attrs, ctrl) { 
 
      elem.on('focus', function() { 
 
       if (!$window.getSelection().toString()) { 
 
        // Required for mobile Safari 
 
        this.setSelectionRange(0, this.value.length) 
 
       } 
 
      }); 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <input type="checkbox" ng-model="edit" ng-init="edit = true"> 
 
    <div ng-bind="edit"></div> 
 
    <div ng-if="edit"> 
 
     <input autofocus type="text" select-text ng-model="name" size="30" placeholder="New Name" /> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-05-02 11:17:41

Es funktioniert genauso wie meine Geige, oder? Ich möchte, dass das Textfeld automatisch wieder aktiviert wird, wenn ein Kontrollkästchen aktiviert ist. – Ashwin

ng-init Text des Eingabeelements auswählen

Antwort

Verwandte Themen