Chọn văn bản trên tiêu điểm đầu vào

Tôi có một đầu vào văn bản. Khi đầu vào nhận được tiêu điểm, tôi muốn chọn văn bản bên trong của đầu vào.

Với jQuery, tôi sẽ làm theo cách này:

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

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

Tôi đã tìm kiếm xung quanh để thử và tìm cách Angular nhưng hầu hết các ví dụ mà tôi tìm thấy đang xử lý một chỉ thị đang xem thuộc tính phương thức để thay đổi. Tôi giả định rằng tôi cần một chỉ thị đang theo dõi đầu vào nhận được tiêu điểm. Tôi sẽ làm điều đó như thế nào?

Cách thực hiện điều này trong Angular là tạo một chỉ thị tùy chỉnh để tự động chọn cho bạn.

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

Áp dụng chỉ thị như sau:

<input type="text" value="test" select-on-click />

View demo

Cập nhật1 : Đã loại bỏ phụ thuộc jQuery.

Update2 : Hạn chế dưới dạng thuộc tính.

Cập nhật 3 : Hoạt động trong Safari di động. Cho phép chọn một phần văn bản (yêu cầu IE> 8).

Đây là một chỉ thị nâng cao giúp tránh chọn lại văn bản khi người dùng nhấp để định vị con trỏ trong hộp nhập liệu.

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

Đây là một câu trả lời cũ cho Angular 1.x

Cách tốt hơn để làm điều đó là sử dụng ng-clickchỉ thị được tích hợp sẵn:

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

BIÊN TẬP:

Như JoshMB đã vui lòng nhắc nhở; tham chiếu đến các nút DOM trong Angular 1.2+ không còn được phép. Vì vậy, tôi đã chuyển $event.target.select()sang bộ điều khiển:

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

Sau đó, trong bộ điều khiển của bạn:

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

Đây là một ví dụ fiddle .

Cả hai giải pháp được đề xuất đều không hoạt động tốt đối với tôi. Sau khi nghiên cứu nhanh, tôi đã nghĩ ra điều này:

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

  }

});

Đó là sự kết hợp của một số giải pháp được đề xuất, nhưng hoạt động cả khi nhấp và lấy nét (nghĩ là lấy nét tự động) và cho phép lựa chọn thủ công giá trị một phần trong đầu vào.

Đối với tôi, ng-click không có ý nghĩa gì, bởi vì bạn không bao giờ có thể định vị lại con trỏ mà không chọn lại tất cả văn bản, tôi thấy điều này thật khó chịu. Sau đó, tốt hơn là sử dụng ng-focus, vì văn bản chỉ được chọn nếu đầu vào không được lấy tiêu điểm, nếu bạn nhấp lại để định vị lại con trỏ thì văn bản chỉ bỏ chọn, như mong đợi và bạn có thể viết ở giữa.

Tôi thấy cách tiếp cận này là hành vi UX được mong đợi.

Sử dụng ng-focus

Tùy chọn 1: mã riêng

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

và trong bộ điều khiển

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

Tùy chọn 2: để thay thế, bạn có thể nối mã ở trên vào "một lớp lót" này (Tôi đã không kiểm tra điều này nhưng nó sẽ hoạt động)

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

Trong góc 2, điều này phù hợp với tôi, cả trong Chrome và Firefox:

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

Câu trả lời được chấp nhận là sử dụng sự kiện nhấp chuột, tuy nhiên nếu bạn sử dụng sự kiện tiêu điểm, chỉ nhấp chuột đầu tiên sẽ kích hoạt sự kiện và nó cũng kích hoạt khi một số phương pháp khác được sử dụng để tập trung vào đầu vào (như nhấn tab hoặc gọi tiêu điểm trong mã).

Điều này cũng làm cho việc kiểm tra xem yếu tố đã được tập trung hay chưa như câu trả lời của Tamlyn gợi ý là không cần thiết.

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

Không cần chỉ thị, chỉ cần thêm onfocus="this.select()"javascript gốc vào phần tử đầu vào hoặc vùng văn bản.

Phiên bản sửa đổi phù hợp với tôi. Nhấp chuột đầu tiên để chọn văn bản, nhấp chuột thứ hai vào cùng một phần tử bỏ chọn văn bản

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

})

Cách dễ nhất để chọn tất cả văn bản trên nhấp chuột hoặc tiêu điểm hoặc tab, là !!!:

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

...

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