ng-init 입력 요소의 텍스트 선택

사용자가 체크 박스를 선택/선택 해제 할 때마다 var edit = true/false을 설정합니다. 나는 편집의 참/거짓에서 나타나거나 사라지는 입력 필드가 있습니다. 내가하고 싶은 일은 텍스트 필드가 나타날 때마다 입력 필드의 텍스트 값을 선택하는 것입니다.ng-init 입력 요소의 텍스트 선택

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();   
    } 
    }; 
});

나는 그것이 나타날 때마다 텍스트 필드의 포커스 이벤트를 호출에 어려움을 겪고 있어요.

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

출처

2017-05-02 Ashwin

'$ (ELEM) .focus()를보십시오. 내가 아는 한'선택 '이벤트가 없습니다 –

나는 그것이 edit 그것을 업데이트 할 때마다 너무 $watch를 사용했다 `이미 요소를 초점을 맞추고 그것을 호출

이

<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>

출처

2017-05-02 11:54:51

사용이

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

데모

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>

출처

2017-05-02 11:17:41

그것은 내 피들과 똑같이 작동합니까, 그렇죠? 확인란을 선택하면 텍스트 필드가 자동으로 포커스를 되찾기를 원합니다. – Ashwin

답변

관련 문제