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

这是example fiddle。

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，因为仅当输入没有聚焦时才选择文本，如果再次单击以重新定位光标，则文本只是取消选择，如预期的那样，您可以在其间写入。

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

使用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

接受的答案是使用click事件但是如果你使用焦点事件，只有第一次点击会触发事件，当使用其他方法聚焦输入时它也会触发（如点击标签或调用焦点）码）。

这也使得没有必要检查元素是否已经成为焦点，正如Tamlyn的答案所示。

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

Answer 7

在角度2中，这对我有用，无论是在Chrome还是在火狐：

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

Answer 8

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

Answer 9

修改后的版本对我有用。首先单击选择文本，再次单击同一元素取消选择文本

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

}）

Answer 10

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

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

...

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

Answer 11

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

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

包裹 $any()

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

在here处找到了进一步的解释。

在输入焦点上选择文本

11 个答案: