Виберіть текст на фокусі введення

У мене є введення тексту. Коли вхід отримує фокус, я хочу вибрати текст всередині введення.

З jQuery я зробив би це так:

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

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

Я шукав навколо, щоб спробувати знайти кутовий спосіб, але більшість прикладів, які я знаходжу, стосуються директиви, яка переглядає модальне властивість для зміни. Я припускаю, що мені потрібна директива, яка стежить за входом, який отримує фокус. Як би я це зробив?

Спосіб зробити це в Angular - створити власну директиву, яка робить автоматичний вибір для вас.

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

Застосовуйте директиву так:

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

View demo

Update1 : Видалено залежність jQuery.

Update2 : обмежити як атрибут.

Update3 : працює в мобільному Safari. Дозволяє вибирати частину тексту (вимагає IE> 8).

Ось вдосконалена директива, що дозволяє уникнути повторного вибору тексту, коли користувач натискає, щоб розташувати курсор у полі введення.

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

Це стара відповідь для Angular 1.x

Краще зробити це за допомогою ng-clickвбудованої директиви:

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

Редагувати:

Як ласкаво нагадав JoshMB ; посилання DOM-вузлів у кутовій 1.2+ більше заборонено. Отже, я перейшов $event.target.select()до контролера:

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

Потім у своєму контролері:

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

Ось приклад скрипки .

Жодне із запропонованих рішень не працювало для мене добре. Після швидких досліджень я придумав таке:

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

  }

});

Це поєднання декількох запропонованих рішень, але працює як на натискання, так і на фокус (подумайте автофокусування) і дозволяє вручну вибрати часткове значення на вході.

Для мене ng-клік не мав сенсу, тому що ви ніколи не можете переставити курсор, не вибравши знову весь текст, я виявив, що це дратує. Тоді краще використовувати ng-фокус, тому що текст вибирається лише в тому випадку, якщо введення не було зосередженим, якщо ви знову натискаєте, щоб перемістити курсор, то текст просто знімає вибір, як очікувалося, і ви можете писати між ними.

Я вважав цей підхід очікуваною поведінкою UX.

Використовуйте ng-фокус

Варіант 1: окремий код

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

і в контролері

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

Варіант 2: як альтернатива, ви можете приєднати вищевказаний код до цього "однолінійного" (я цього не перевіряв, але він повинен працювати)

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

У куті 2 це працювало для мене, як у Chrome та Firefox:

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

Прийнята відповідь використовує подію натискання, але якщо ви використовуєте подію фокусування, лише 1-й клацання призведе до запуску події, а також запуститься, коли використовується якийсь інший метод для фокусування на вході (наприклад, вкладка натискання або виклик фокусу в коді).

Це також робить зайвим перевіряти, чи елемент вже зосереджений, як підказує відповідь Тамліна.

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

Ніяких директив не потрібно, просто додайте onfocus="this.select()"рідний javascript у вхідний елемент або текстову область.

Модифікована версія, яка працювала на мене. Першим клацанням миші вибираємо текст, другим клацанням того ж елемента знімаємо текст

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

})