입력 포커스에서 텍스트 선택

텍스트 입력이 있습니다. 입력이 포커스를 받으면 입력 내부의 텍스트를 선택하고 싶습니다.

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

다음은 fiddle 예제 입니다.

제안 된 솔루션 중 어느 것도 저에게 잘 맞지 않았습니다. 빠른 연구 끝에 나는 이것을 생각해 냈습니다.

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 초점

옵션 1 : 별도 코드

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

그리고 컨트롤러에서

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

옵션 2 : 대안으로 위의 코드를이 "one-liner"에 결합 할 수 있습니다 (테스트하지는 않았지만 작동 할 것입니다).

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

angular 2에서는 Chrome과 Firefox에서 모두 저에게 효과적이었습니다.

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

허용되는 대답은 클릭 이벤트를 사용하는 것입니다. 그러나 포커스 이벤트를 사용하는 경우 첫 번째 클릭 만 이벤트를 발생시키고 입력에 초점을 맞추기 위해 다른 방법을 사용할 때도 발생합니다 (예 : 탭 누르기 또는 코드에서 포커스 호출).

이것은 또한 Tamlyn의 답변에서 알 수 있듯이 요소가 이미 집중되어 있는지 확인할 필요가 없습니다.

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

지시문이 필요하지 않습니다 onfocus="this.select()". 입력 요소 또는 텍스트 영역 에 네이티브 자바 스크립트를 추가하기 만하면 됩니다.

나를 위해 일한 수정 된 버전. 첫 번째 클릭은 텍스트를 선택하고 두 번째 클릭은 텍스트를 선택 취소합니다.

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

})