Zaznacz tekst w elemencie

Question

Mam element input i ma tekstu wewnątrz niego za pomocą NG-model, a następnie próbuję zaznaczyć cały tekst poprzez tworzenie niestandardowych detektywa:

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

to działa dobrze, ale Nie chcę, aby tekst został również wybrany ponownie, gdy użytkownik foucusout z kontrolki i ponownie. Powinien wybrać tekst tylko raz (nie na drugim ognisku). Również w jaki sposób mogę usunąć fokus z elementu, gdy zaznaczony jest cały tekst?

Answer 1

Możesz utworzyć zmienną, która będzie zawierać wartość boolowską, jeśli element jest zaznaczony, i wybierz element tylko wtedy, gdy nie jest jeszcze zaznaczony. Tak:

.directive('selectText', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, elem, attrs, ctrl) { 
      var selected = false; 
      elem.bind('focus', function() { 
       if (!selected) { 
        $(elem).select(); 
        selected = true; 
       } 
      }); 
      scope.$watch("edit",function(newValue,oldValue) { 
       $(elem).select(); 
      }); 
     } 
    }; 
}) 

Answer 2

function Ctrl3($scope) { 
 
    $scope.title = 'My relevant title'; 
 
} 
 

 
angular.module('scopePropertiesModule', []) 
 
    .directive('selectText', function() { 
 
    return { 
 
     require: 'ngModel', 
 
     link: function(scope, elem, attrs, ctrl) { 
 
     var counter = 0; 
 
     elem.bind('focus', function() { 
 
      console.log(counter) 
 

 
      if (counter < 1) { 
 
      $(elem).select(); 
 
      /*setTimeout(function() { 
 
       $(elem).blur(); 
 
      }, 1000);*/ 
 
      
 
      counter++; 
 
      } 
 
     }); 
 
     scope.$watch("edit", function(newValue, oldValue) { 
 
      $(elem).select(); 
 
     }); 
 
     } 
 
    }; 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> 
 
<div ng-app="scopePropertiesModule"> 
 
    <div ng-controller="Ctrl3"> 
 
    <input select-text ng-model="title"> 
 
    </div> 
 
</div>

sprawdzić.