Zaznacz tekst w fokusie wprowadzania

Mam wpisywanie tekstu. Kiedy wejście jest fokusem, chcę zaznaczyć tekst wewnątrz wejścia.

Z jQuery zrobiłbym to w ten sposób:

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

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

Szukałem wokół, aby spróbować znaleźć sposób Angular, ale większość przykładów, które znajduję, dotyczy dyrektywy, która obserwuje właściwość modalną pod kątem zmiany. Zakładam, że potrzebuję dyrektywy, która obserwuje dane wejściowe, które są skupione. Jak bym to zrobił?

Sposobem na to w Angular jest utworzenie niestandardowej dyrektywy, która dokonuje automatycznego wyboru za Ciebie.

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

Zastosuj dyrektywę w następujący sposób:

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

View demo

Update1 : Usunięto zależność jQuery.

Aktualizacja2 : Ogranicz jako atrybut.

Aktualizacja 3 : Działa w mobilnym Safari. Umożliwia zaznaczenie części tekstu (wymaga IE> 8).

Oto ulepszona dyrektywa, która pozwala uniknąć ponownego zaznaczania tekstu, gdy użytkownik kliknie, aby ustawić kursor w polu wprowadzania.

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

To stara odpowiedź dla Angular 1.x

Lepszym sposobem na to jest użycie ng-clickwbudowanej dyrektywy:

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

EDYTOWAĆ:

Jak uprzejmie przypomniał JoshMB ; odwoływanie się do węzłów DOM w Angular 1.2+ nie jest już dozwolone. Więc przeniosłem $event.target.select()się do kontrolera:

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

Następnie w kontrolerze:

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

Oto przykładowe skrzypce .

Żadne z proponowanych rozwiązań nie sprawdziło się dla mnie. Po szybkich poszukiwaniach wymyśliłem to:

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

  }

});

Jest to mieszanka kilku proponowanych rozwiązań, ale działa zarówno na kliknięcie, jak i na fokus (pomyśl o autofokusie) i pozwala na ręczny wybór wartości częściowej w wejściu.

Dla mnie ng-click nie miało sensu, ponieważ nigdy nie można było zmienić położenia kursora bez ponownego zaznaczenia całego tekstu, stwierdziłem, że to anno. Wtedy lepiej jest użyć ng-focus, ponieważ tekst jest zaznaczony tylko wtedy, gdy wejście nie było fokusem, jeśli klikniesz ponownie, aby zmienić położenie kursora, tekst po prostu odznacza się, zgodnie z oczekiwaniami, i możesz pisać pomiędzy.

Uważam, że to podejście jest oczekiwanym zachowaniem UX.

Użyj ng-focus

Opcja 1: oddzielny kod

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

i w kontrolerze

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

Opcja 2: jako alternatywę możesz dołączyć powyższy kod do tego „jednowierszowego” (nie testowałem tego, ale powinno działać)

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

W Angular 2 zadziałało to dla mnie, zarówno w Chrome, jak i Firefox:

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

Zaakceptowaną odpowiedzią jest użycie zdarzenia click, jednak jeśli użyjesz zdarzenia focus, tylko pierwsze kliknięcie uruchomi zdarzenie, a także zostanie uruchomione, gdy zostanie użyta inna metoda do skupienia się na danych wejściowych (np. Naciśnięcie tabulatora lub wywołanie fokusa w kodzie).

To również sprawia, że ​​nie ma potrzeby sprawdzania, czy element jest już skupiony, jak sugeruje odpowiedź Tamlyna.

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

Żadne dyrektywy nie są potrzebne, po prostu dodaj onfocus="this.select()"natywny javascript do elementu wejściowego lub obszaru tekstowego.

Zmodyfikowana wersja, która działała dla mnie. Pierwsze kliknięcie zaznacza tekst, drugie kliknięcie tego samego elementu odznacza tekst

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

})

Najłatwiejszym sposobem zaznaczenia całego tekstu po kliknięciu, fokusie lub karcie jest !!!:

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

...

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