选择输入焦点上的文本

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

使用jQuery，我可以这样：

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

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

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

在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）。

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

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

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

这是一个小提琴的例子。

提议的解决方案都不适合我。经过快速研究，我得出了以下结论：

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

在角度2中，这对我都有效，在Chrome和Firefox中均如此：

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

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

这也使得不必像Tamlyn的答案所建议的那样检查元素是否已经集中。

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

}）