在input焦点上select文本
我有一个文本input。 当input收到焦点时，我想selectinput内的文本。
用jQuery我会这样做：
<input type="text" value="test" /> $("input[type=text]").click(function() { $(this).select(); // would select "test" in this example });
我已经四处search，试图findAngular的方式，但是我发现的大多数例子都是处理一个指令，它正在观察一个变化的模态属性。 我假设我需要一个指令，正在观察接收焦点的input。 我该怎么做？
在Angular中这样做的方法是创build一个自定义指令，为您自动select。
module.directive('selectOnClick', ['$window', function ($window) { return { restrict: 'A', link: function (scope, element, attrs) { element.on('click', function () { if (!$window.getSelection().toString()) { // Required for mobile Safari this.setSelectionRange(0, this.value.length) } }); } }; }]);
像这样应用指令：
<input type="text" value="test" select-on-click />
查看演示
Update1 ：删除jQuery依赖。
Update2 ：限制为属性。
Update3 ：适用于移动Safari。 允许select部分文本（需要IE> 8）。
这是一个增强的指令，避免在用户点击光标到input框中时重新select文本。
module.directive('selectOnClick', function () { return { restrict: 'A', link: function (scope, element) { var focusedElement; element.on('click', function () { if (focusedElement != this) { this.select(); focusedElement = this; } }); element.on('blur', function () { focusedElement = null; }); } }; })
更好的方法是使用ng-click内置指令：
<input type="text" ng-model="content" ng-click="$event.target.select()" />
编辑：
正如JoshMB提醒的那样; 在Angular 1.2+中引用DOM节点不再被允许。 所以，我把$event.target.select()移到了控制器中：
<input type="text" ng-model="content" ng-click="onTextClick($event)" />
然后在你的控制器中：
$scope.onTextClick = function ($event) { $event.target.select(); };
这里是一个例子小提琴 。
提出的解决scheme都不适合我。 经过快速的研究，我想出了这个：
module.directive('selectOnFocus', function ($timeout) { return { restrict: 'A', link: function (scope, element, attrs) { var focusedElement = null; element.on('focus', function () { var self = this; if (focusedElement != self) { focusedElement = self; $timeout(function () { self.select(); }, 10); } }); element.on('blur', function () { focusedElement = null; }); } } });
它是几种解决scheme的组合，但是可以在点击和焦点（思考自动对焦）上工作，并允许手动selectinput中的部分值。
对我来说，ng-click没有任何意义，因为如果不重新select所有的文本，你永远不能重新定位光标，我发现这是令人厌烦的。 那么最好使用ng-focus，因为只有当input没有被聚焦时才select文本，如果再次点击来重新定位光标，那么文本只是按照预期的那样取消select，而且可以在两者之间写入。
我发现这种方法是预期的用户体验行为。
使用ng-focus
选项1：单独的代码
<input type="text" ng-model="content" ng-focus="onTextFocus($event)" />
并在控制器
$scope.onTextFocus = function ($event) { $event.target.select(); };
选项2：作为一种select，您可以将上面的代码join到这个“单行”（我没有testing这个，但它应该工作）
<input type="text" ng-model="content" ng-focus="$event.target.select()" />
接受的答案是使用点击事件，但是如果你使用焦点事件，只有第一次点击会触发事件，而且当使用其他方法来关注input时（例如点击标签或调用焦点代码），也会触发事件。
这也使得没有必要检查这个元素是否已经被Tamlyn的答案所暗示。
app.directive('selectOnClick', function () { return { restrict: 'A', link: function (scope, element, attrs) { element.on('focus', function () { this.select(); }); } }; });
在angular度2中，这对我和Chrome和Firefox都有效：
<input type="text" (mouseup)="$event.target.select()">
修改后的版本，为我工作。 首先点击select文本，然后点击相同的元素取消select文本
module.directive('selectOnClick', function ($timeout) { return { restrict: 'A', link: function (scope, element, attrs) { var prevClickElem = null; //Last clicked element var ignorePrevNullOnBlur = false; //Ignoring the prevClickElem = null in Blur massege function element.on('click', function () { var self = this; if (prevClickElem != self) { //First click on new element prevClickElem = self; $timeout(function () { //Timer if(self.type == "number") self.select(); else self.setSelectionRange(0, self.value.length) }, 10); } else { //Second click on same element if (self.type == "number") { ignorePrevNullOnBlur = true; self.blur(); } else self.setSelectionRange(self.value.length, self.value.length); //deselect and set cursor on last pos } }); element.on('blur', function () { if (ignorePrevNullOnBlur == true) ignorePrevNullOnBlur = false; //blur called from code handeling the second click else prevClickElem = null; //We are leaving input box }); } }
}）
