Wählen Sie den Text im Eingabefokus aus

Ich habe eine Texteingabe. Wenn die Eingabe den Fokus erhält, möchte ich den Text innerhalb der Eingabe auswählen.

Mit jQuery würde ich es so machen:

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

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

Ich habe mich umgesehen, um den Angular-Weg zu finden, aber die meisten Beispiele, die ich finde, befassen sich mit einer Direktive, die eine modale Eigenschaft zur Änderung überwacht. Ich gehe davon aus, dass ich eine Direktive brauche, die nach einer Eingabe sucht, die den Fokus erhält. Wie würde ich das machen?

In Angular können Sie dazu eine benutzerdefinierte Direktive erstellen, die die automatische Auswahl für Sie übernimmt.

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

Wenden Sie die Richtlinie folgendermaßen an:

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

View demo

Update1 : Die jQuery-Abhängigkeit wurde entfernt.

Update2 : Als Attribut einschränken .

Update3 : Funktioniert in Mobile Safari. Ermöglicht die Auswahl eines Teils des Textes (erfordert IE> 8).

Hier ist eine erweiterte Anweisung, die verhindert, dass der Text erneut ausgewählt wird, wenn der Benutzer klickt, um den Cursor im Eingabefeld zu positionieren.

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 ist es, die ng-clickeingebaute Direktive zu verwenden:

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

BEARBEITEN:

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

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

Dann in Ihrem Controller:

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

Hier ist ein Beispiel für eine Geige .

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

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, funktioniert jedoch sowohl beim Klicken als auch beim Fokussieren (denken Sie an Autofokus) und ermöglicht die manuelle Auswahl des Teilwerts in der Eingabe.

Für mich hatte ng-click keinen Sinn, da man den Cursor nie neu positionieren konnte, ohne den gesamten Text erneut auszuwählen. Ich fand das ärgerlich. Dann ist es besser, ng-focus zu verwenden, da der Text nur ausgewählt wird, wenn die Eingabe nicht fokussiert war. Wenn Sie erneut klicken, um den Cursor neu zu positionieren, wird die Auswahl des Texts wie erwartet einfach 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 in der Steuerung

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

Option 2: Alternativ können Sie den obigen Code in diesen "Einzeiler" einfügen (ich habe dies nicht getestet, aber es sollte funktionieren).

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

In Winkel 2 funktionierte dies für mich, sowohl in Chrome als auch in Firefox:

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

Die akzeptierte Antwort verwendet das Klickereignis. Wenn Sie jedoch das Fokusereignis verwenden, wird das Ereignis nur durch den ersten Klick ausgelöst, und es wird auch ausgelöst, wenn eine andere Methode zum Fokussieren auf die Eingabe verwendet wird (z. B. Drücken der Registerkarte oder Aufrufen des Fokus im Code).

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

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

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

Geänderte Version, die für mich funktioniert hat. Erster Klick wählt Text aus, zweiter Klick auf dasselbe Element hebt die Auswahl von Text auf

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

})