在输入焦点上选择文本

Question

我有一个文字输入.当输入获得焦点时,我想选择输入内的文本.

使用jQuery我会这样做:

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

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

我一直在寻找尝试找到Angular的方法,但我发现的大多数例子都是在处理一个正在观察变化的模态属性的指令.我假设我需要一个正在观察获得焦点的输入的指令.我该怎么办？

Answer 1

在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:限制为属性.

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

Answer 2

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

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

Answer 3

对于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();
};

这是一个小例子.

Answer 4

所提出的解决方案都不适合我.经过快速研究后,我想出了这个:

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

  }

});

它是所提出的几种解决方案的混合,但同时适用于点击和聚焦(想想自动对焦),并允许在输入中手动选择部分值.

Answer 5

对我来说,ng-click没有意义,因为你再也无法重新定位光标而没有再次选择所有文本,我发现这是令人讨厌的.然后最好使用ng-focus,因为仅当输入没有聚焦时才选择文本,如果再次单击以重新定位光标,则文本只是按预期取消选择,您可以在其间写入.

我发现这种方法是预期的UX行为.

使用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()" />

Answer 6

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

Answer 7

接受的答案是使用click事件,但是如果你使用焦点事件,只有第一次点击会触发事件,当使用其他一些方法聚焦输入时(如击中标签或在代码中调用焦点),它也会触发.

这也使得没有必要检查该元素是否已经像Tamlyn的回答所暗示的那样已经集中.

app.directive('selectOnClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('focus', function () {
                this.select();
            });
        }
    };
});

Answer 8

在角度2中,这适用于我,包括Chrome和Firefox:

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