选择元素中的文本

Posted 2023-02-22

【中文标题】选择元素中的文本

【英文标题】：Select text in element

【发布时间】：2018-01-08 02:42:59

【问题描述】：

我有一个 input 元素，它使用 ng-model 在其中包含文本，然后我尝试通过创建自定义侦探来选择所有文本：

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

它运行良好，但我不希望当用户foucusout 来自控件并再次选择focusin 时也选择它的文本。它应该只选择一次文本（而不是第二个焦点）。 另外，当所有文本都被选中时，如何从元素中移除焦点？

【问题讨论】：

你想在选择所有文本后立即聚焦吗？还是别的什么？

【参考方案1】：

您可以创建一个变量，如果元素被选中，则该变量将保存布尔值，并且仅在元素尚未被选中时才选择元素。像这样：

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

【讨论】：

没有“加载”、“显示”等事件...？

【参考方案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>

检查一下。