it-swarm.com.de

Text für Eingabefokus auswählen

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 herumgesucht, um den Winkel zu finden, aber die meisten Beispiele, die ich finde, beschäftigen sich mit einer Direktive, die eine modale Eigenschaft auf eine Änderung überwacht. Ich gehe davon aus, dass ich eine Direktive benötige, die auf eine Eingabe achtet, die den Fokus erhält. Wie würde ich das machen? 

116
Billy Coover

Um dies in Angular zu tun, müssen Sie eine benutzerdefinierte Direktive erstellen, die die automatische Auswahl für Sie vornimmt.

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 Anweisung folgendermaßen an:

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

View demo

Update1 : jQuery-Abhängigkeit wurde entfernt.

Update2 : Als Attribut einschränken.

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

211
Martin

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

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 .

38

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.

15
xaralis

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()" />
11
jperelli

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

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

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

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

0
Adam Reis

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

})

0
Ola