我有一个文本输入。 当输入获得焦点我要选择输入中的文本。
使用jQuery我会做这种方式：
<input type="text" value="test" />
$("input[type=text]").click(function() {
$(this).select();
// would select "test" in this example
});
我四处寻找，试图找到该角的方式，但大多数的例子我发现现在处理的是看一换模态特性的指令。 我假设我需要的是留意要获得焦点的输入指令。 我会怎么做呢？
在角做到这一点的方法是创建不自动选择适合你的自定义指令。
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移动。 允许选择文本的一部分（需要IE> 8）。
下面是当用户点击将光标定位在输入框中从而避免了重新选择的文本增强的指令。
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;
});
}
};
})
这是一个古老的答案，对角的1.x
更好的方式来做到这一点是通过使用ng-click内置指令：
<input type="text" ng-model="content" ng-click="$event.target.select()" />
编辑：
作为JoshMB已经好心提醒; 在角1.2+引用DOM节点不再允许。 所以，我搬到$event.target.select()到控制器：
<input type="text" ng-model="content" ng-click="onTextClick($event)" />
然后在你的控制器：
$scope.onTextClick = function ($event) {
$event.target.select();
};
下面是一个例子小提琴 。
无论是提出的解决方案为我工作很好。 快速研究后，我想出了这一点：
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;
});
}
}
});
它提出了几种解决方案的组合，但在输入是双向的点击对焦（自动对焦认为），并允许部分值的手动选择。
对于我来说，NG-点击没有意义，因为你永远无法重新定位光标，而无需再次选择的所有文字，我发现这是annoing。 那么最好是用NG-焦点，因为只有被选中文字，如果输入不集中，如果你再次点击重新定位光标，则文本只是取消选择，符合市场预期，你可以写之间英寸
我发现这种方法是预期的UX的行为。
使用焦点
选项1：单独的代码
<input type="text" ng-model="content" ng-focus="onTextFocus($event)" />
并在控制器
$scope.onTextFocus = function ($event) {
$event.target.select();
};
选项2：作为替代，您可以加入上面的代码到这个“一行代码”（我没有测试这一点，但它应该工作）
<input type="text" ng-model="content" ng-focus="$event.target.select()" />
然而，接受的答案是使用click事件，如果你使用的焦点事件，只有第1点击就会触发该事件，同时也时触发一些其他的方法来集中输入（如打标签或调用焦点代码）。
这也使得它不必检查元素早已开始关注作为塔姆林的回答暗示。
app.directive('selectOnClick', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('focus', function () {
this.select();
});
}
};
});
在角2，这个工作对我来说，无论是在Chrome和Firefox：
<input type="text" (mouseup)="$event.target.select()">
没有指令需要，只需添加onfocus="this.select()"本地JavaScript到输入元素或文本区域。
修改为我工作的版本。 首先点击选择文本，相同的元素第二次单击取消选择文本
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
});
}
}
}）
