Giriş odağında metin seçin

Metin girdim var. Giriş odak aldığında, girişin içindeki metni seçmek istiyorum.

JQuery ile bunu şu şekilde yapardım:

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

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

Açısal yolu denemek ve bulmak için etrafı araştırdım, ancak bulduğum çoğu örnek, bir değişiklik için modal bir özelliği izleyen bir direktifle ilgileniyor. Odak alan bir girdiyi izleyen bir yönergeye ihtiyacım olduğunu varsayıyorum. Bunu nasıl yaparım?

Bunu Angular'da yapmanın yolu, sizin için otomatik seçim yapan özel bir yönerge oluşturmaktır.

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

Yönergeyi şu şekilde uygulayın:

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

View demo

Güncelleme1 : jQuery bağımlılığı kaldırıldı.

Güncelleme2 : Öznitelik olarak kısıtlayın.

Güncelleme3 : Mobil Safari'de çalışır. Metnin bir bölümünü seçmeye izin verir (IE> 8 gerektirir).

Burada, kullanıcı imleci giriş kutusuna yerleştirmek için tıkladığında metnin yeniden seçilmesini önleyen gelişmiş bir yönerge.

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

Bu, Angular 1.x için eski bir cevaptır.

Bunu yapmanın daha iyi yolu, ng-clickyerleşik yönergeyi kullanmaktır:

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

DÜZENLE:

Şöyle JoshMB nazik hatırlattığı; Angular 1.2+ sürümünde DOM düğümlerine başvurmaya artık izin verilmiyor. Yani, $event.target.select()denetleyiciye geçtim :

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

Sonra kontrol cihazınızda:

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

İşte bir örnek keman .

Önerilen çözümlerin hiçbiri benim için iyi sonuç vermedi. Hızlı bir araştırmadan sonra şunu buldum:

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

  }

});

Önerilen birkaç çözümün bir karışımıdır, ancak hem tıklama hem de odak üzerinde çalışır (otomatik odaklamayı düşünün) ve girdideki kısmi değerin manuel olarak seçilmesine izin verir.

Benim için ng-tıklamanın bir anlamı yoktu, çünkü tüm metni tekrar seçmeden imleci asla yeniden konumlandıramazsınız, bunun can sıkıcı olduğunu gördüm. Bu durumda ng-odak kullanmak daha iyidir, çünkü metin yalnızca girişe odaklanılmamışsa seçilir, imleci yeniden konumlandırmak için tekrar tıklarsanız, beklendiği gibi metin yalnızca seçimi kaldırır ve aralarına yazabilirsiniz.

Bu yaklaşımı beklenen UX davranışı olarak buldum.

Kullan ng odaklama

Seçenek 1: ayrı kod

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

ve kontrolörde

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

Seçenek 2: Alternatif olarak, yukarıdaki kodu bu "tek satırlık" olarak birleştirebilirsiniz (bunu test etmedim ama işe yaramalı)

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

Açısal 2'de bu, hem Chrome hem de Firefox'ta benim için çalıştı:

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

Kabul edilen cevap tıklama olayını kullanmaktır ancak odak olayını kullanırsanız, yalnızca 1. tıklama olayı tetikler ve aynı zamanda girdiye odaklanmak için başka bir yöntem kullanıldığında (sekmeye basmak veya kodda odağı çağırmak gibi) tetiklenir.

Bu aynı zamanda, Tamlyn'in cevabının da önerdiği gibi, öğenin zaten odaklanmış olup olmadığını kontrol etmeyi gereksiz kılar.

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

Yönerge gerekmez, yalnızca onfocus="this.select()"giriş öğesine veya metin alanına yerel javascript ekleyin .

Benim için çalışan değiştirilmiş sürüm. İlk tıklama metni seçer, aynı öğeye ikinci tıklama metnin seçimini kaldırır

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

})

Tıklama veya odak veya sekmedeki tüm metni seçmenin en kolay yolu !!!:

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

...

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