Text für Eingabefokus auswählen

Hier ist eine erweiterte Direktive, die das erneute Auswählen des Textes verhindert, wenn der Benutzer den Cursor in das Eingabefeld setzt.

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

Dies ist eine alte Antwort für Angular 1.x

Besser geht es mit der eingebauten Direktive ng-click:

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

EDIT:

Wie JoshMB hat freundlicherweise daran erinnert; Das Referenzieren von DOM-Knoten in Angular 1.2+ ist nicht mehr zulässig. Also habe ich $event.target.select() in den Controller verschoben:

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

Dann in Ihrem Controller:

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

Hier ist eine Beispiel-Geige .

Keine der vorgeschlagenen Lösungen hat für mich gut funktioniert. Nach kurzer Recherche kam ich dazu:

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

  }

});

Es ist eine Mischung aus mehreren vorgeschlagenen Lösungen, arbeitet jedoch sowohl mit Klick als auch mit Fokus (Autofokus denken) und ermöglicht die manuelle Auswahl des Teilwerts in der Eingabe.

Ng-click hatte für mich keinen Sinn, weil Sie den Cursor niemals neu positionieren konnten, ohne den gesamten Text erneut auszuwählen. Ich fand das sehr nervig. Dann ist es besser, ng-focus zu verwenden, da der Text nur ausgewählt wird, wenn die Eingabe nicht fokussiert wurde. Wenn Sie erneut klicken, um den Cursor neu zu positionieren, wird die Auswahl des Textes wie erwartet aufgehoben und Sie können dazwischen schreiben.

Ich fand, dass dieser Ansatz das erwartete UX-Verhalten ist.

Verwenden Sie ng-focus

Option 1: separater Code

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

und im Controller

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

Option 2: Als Alternative können Sie den Code oben in diesen "Einzeiler" einfügen (ich habe das nicht getestet, aber es sollte funktionieren)

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

In eckig 2 hat dies für mich funktioniert, sowohl in Chrome als auch in Firefox:

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

Die akzeptierte Antwort verwendet das click-Ereignis. Wenn Sie jedoch das focus-Ereignis verwenden, wird das Ereignis nur durch den 1. Klick ausgelöst. Es wird auch ausgelöst, wenn eine andere Methode verwendet wird, um sich auf die Eingabe zu konzentrieren (z. B. das Drücken der Registerkarte oder das Aufrufen des Fokus im Code).

Dies macht es auch unnötig zu prüfen, ob das Element bereits fokussiert ist, wie Tamlyns Antwort nahelegt.

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

Keine Anweisungen erforderlich, fügen Sie einfach onfocus="this.select()" natives Javascript zum Eingabeelement oder Textbereich hinzu.

Geänderte Version, die für mich funktioniert hat . Beim ersten Klick wird Text ausgewählt, beim zweiten Klicken auf dasselbe Element wird der Text deaktiviert 

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

})