입력 포커스에 대한 텍스트 선택

입력 포커스에 대한 텍스트 선택

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

jQuery를 사용하면 다음과 같이 할 수 있습니다.

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

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

Angular way를 찾기 위해 여러 곳을 찾아봤지만, 내가 찾은 대부분의 예는 변화를 위해 모달 속성을 감시하는 디렉티브를 다루는 것입니다.포커스를 수신하는 입력을 감시하는 지시가 필요할 것 같습니다.내가 그걸 어떻게 하겠어?

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

업데이트 1: jQuery 의존관계가 삭제되었습니다.

업데이트 2:속성으로 제한합니다.

업데이트 3:모바일 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()" />

지시문은 필요 없습니다.추가만 하면 됩니다.onfocus="this.select()"네이티브 javascript를 입력 요소 또는 텍스트 영역에 추가합니다.

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

클릭, 포커스 또는 탭에서 모든 텍스트를 선택하는 가장 쉬운 방법은!!!

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

...

inputFocused(event: any){
    event.target.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
        });
    }
}

})

$event.target.select()unresolved in Angular 각에서 되지 않음)

로 할 수 예: "HTML Element")HTMLSelectElement그러나은 캐스팅을 단, 각도 표현에서는 캐스팅을 사용할 수 없습니다.가장 좋은 회피책은 포장하는 것입니다.$event.target$any()

요.(focus) = $any($event.target).select()

자세한 설명은 이쪽에서 확인하실 수 있습니다.

언급URL : https://stackoverflow.com/questions/14995884/select-text-on-input-focus