在输入焦点上选择文本

我有一个文本输入。当输入接收焦点时，我想选择输入内部的文本。

对于 jQuery，我是这样做的:

<input type="text" value="test" />

$("input[type=text]").click(function() {
$(this).select();
// would select "test" in this example
});

我四处搜索，试图找到角度的方式，但我发现大多数例子是处理一个指令，这是观察模态属性的变化。我假设我需要一个指令来监视接收到焦点的输入。我要怎么做？

103992 次浏览
小开
最佳答案

在 Angular 中实现这一点的方法是创建一个自定义指令，该指令为您执行自动选择。

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

View demo

Update1: Removed jQuery dependency.

Update2 : 将其限制为属性。

Update3 : 适用于移动 Safari。允许选择部分文本(需要 IE > 8)。

小开

这是一个古老的答案，对于角度1.x

Better way to do it is by using the ng-click built-in directive:

<input type="text" ng-model="content" ng-click="$event.target.select()" />

编辑:

As JoshMB has kindly reminded; referencing DOM nodes in Angular 1.2+ is no longer allowed. So, I've moved $event.target.select() into the controller:

<input type="text" ng-model="content" ng-click="onTextClick($event)" />

然后在你的控制器中:

$scope.onTextClick = function ($event) {
$event.target.select();
};

Here is an < strong > 示例提琴 .

小开

下面是一个增强的指令，它可以避免在用户单击以将光标定位在输入框中时重新选择文本。

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;
});
}
};
})
小开

接受的答案是使用点击事件，但是如果你使用焦点事件，只有第一次点击将触发事件，它也会触发当其他方法被用来关注输入(如点击选项卡或调用代码中的焦点)。

这也使得检查元素是否已经像 Tamlyn 的回答所暗示的那样聚焦成功变得没有必要。

app.directive('selectOnClick', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('focus', function () {
this.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;
});
}


}


});

这是一个混合的几个解决方案提出，但工程都点击和焦点(认为自动对焦) ，并允许手动选择部分价值的输入。

小开

对我有效的改良版。 第一次点击选择文本，第二次点击相同的元素取消选择文本

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

})

小开

For me, ng-click didn't have sense, because you could never reposition the cursor without selecting all text again, I found this was annoing. Then it is better to use ng-focus, because the text is selected only if the input was not focused, if you click again to reposition the cursor then the text just deselects, as expected, and you can write in between.

我发现这种方法是预期的用户体验行为。

使用 集中注意力

选项1: 单独的代码

<input type="text" ng-model="content" ng-focus="onTextFocus($event)" />

and in controller

$scope.onTextFocus = function ($event) {
$event.target.select();
};

选项2: 作为替代，您可以将上面的代码加入到这个“一行程序”中(我没有测试这个，但它应该可以工作)

<input type="text" ng-model="content" ng-focus="$event.target.select()" />
小开

在角度2中，这对我很有用，无论是在 Chrome 还是 Firefox 中:

<input type="text" (mouseup)="$event.target.select()">
小开

不需要指令，只需将 onfocus="this.select()"原生 javascript 添加到输入元素或文本区域。

小开

最简单的方法来选择所有的文本点击或焦点或制表符，是:

<input (focus)="inputFocused($event)">

...

inputFocused(event: any){
event.target.select()
}
小开

$event.target.select()未在角度模板中解析

事件目标可以是任何 HTML 元素，对应用程序接口的强制转换应该在这里应用(如 HTMLSelectElement) ，但是，角度表达式不允许强制转换。最好的解决办法是用 $any()包装 $event.target

它应该是这样的: (focus) = $any($event.target).select()

进一步的解释在这里发现 给你。


提交答案