Выделить текст в фокусе ввода

У меня есть ввод текста. Когда ввод получает фокус, я хочу выделить текст внутри ввода.

С jQuery я бы сделал это так:

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

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

Я искал вокруг, пытаясь найти способ Angular, но большинство примеров, которые я нахожу, связаны с директивой, которая отслеживает изменение модального свойства. Я предполагаю, что мне нужна директива, которая отслеживает ввод, который получает фокус. Как мне это сделать?

В 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.

Обновление 2 : ограничить как атрибут.

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 в Angular 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-click не имеет смысла, потому что вы никогда не сможете изменить положение курсора, не выделив весь текст снова, я обнаружил, что это раздражает. Тогда лучше использовать ng-focus, потому что текст выделяется только в том случае, если ввод не был сфокусирован, если вы щелкните еще раз, чтобы переместить курсор, тогда текст просто отменяется, как и ожидалось, и вы можете писать между ними.

Я обнаружил, что такой подход является ожидаемым поведением UX.

Используйте ng-focus

Вариант 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()" />

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

})

Самый простой способ выделить весь текст при нажатии, фокусе или табуляции !!!:

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

...

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