121

我有一个文本输入。当输入获得焦点时，我想选择输入内的文本。

使用 jQuery 我会这样做：

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

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

我四处寻找尝试找到 Angular 方式，但我发现的大多数示例都是处理一个指令，该指令正在监视模式属性以进行更改。我假设我需要一个指令来监视接收焦点的输入。我该怎么做？

4

11 回答 11

218

在 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：​​删除了 jQuery 依赖项。

Update2：限制为属性。

更新 3：适用于移动 Safari。允许选择部分文本（需要 IE>8）。

于 2013-02-21T06:53:18.913 回答
44

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

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;
            });
        }
    };
})
于 2014-06-04T15:35:08.790 回答
41

对于 Angular 1.x，这是一个旧答案

更好的方法是使用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();
};

这是一个示例小提琴。

于 2014-04-13T22:29:09.687 回答
15

两种提议的解决方案都不适合我。经过快速研究，我想出了这个：

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

  }

});

它混合了几种提出的解决方案，但同时适用于点击和对焦（想想自动对焦），并允许手动选择输入中的部分值。

于 2015-07-17T09:17:54.460 回答
12

对我来说，ng-click 没有意义，因为如果不再次选择所有文本，您将永远无法重新定位光标，我发现这很烦人。然后最好使用 ng-focus，因为只有当输入没有聚焦时才会选择文本，如果再次单击以重新定位光标，那么文本就会按预期取消选择，并且您可以在两者之间进行书写。

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

使用ng-focus

选项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()" />
于 2016-12-25T20:17:47.523 回答
10

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

于 2019-02-08T19:47:05.920 回答
8

在 Angular 2 中，这对我有用，无论是在 Chrome 和 Firefox 中：

<input type="text" (mouseup)="$event.target.select()">
于 2017-03-14T17:06:01.650 回答
6

接受的答案是使用 click 事件，但是如果您使用 focus 事件，则只有第一次单击会触发该事件，并且当使用其他一些方法来关注输入时它也会触发（例如点击选项卡或在代码中调用焦点）。

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

app.directive('selectOnClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('focus', function () {
                this.select();
            });
        }
    };
});
于 2015-04-30T13:47:47.543 回答
3

在单击或焦点或选项卡上选择所有文本的最简单方法是!!!：

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

...

inputFocused(event: any){
    event.target.select()
}
于 2020-08-06T17:21:41.670 回答
0

对我有用的修改版。第一次单击选择文本，第二次单击同一元素取消选择文本

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

})

于 2016-10-24T10:22:56.870 回答
-1

$event.target.select()未在 Angular 模板中解决

事件目标可以是任何 HTML 元素，并且应在此处应用对应用程序界面的强制转换（如HTMLSelectElement），但是，Angular 表达式不允许强制转换。最好的解决方法是$event.target用$any()

所以，它应该是这样的：(focus) = $any($event.target).select()

在这里找到进一步的解释。

于 2021-08-10T07:52:26.063 回答