Выделите текст на Фокусе ввода

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

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

это старый ответ, для углового 1.x

лучший способ сделать это с помощью ng-click встроенные директивы:

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

EDIT:

как 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.

использовать НГ-фокус

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

принятый ответ использует событие click однако, если вы используете событие focus, только 1-й щелчок вызовет событие, а также срабатывает, когда используется какой-либо другой метод для фокусировки на входе (например, нажатие вкладки или вызов фокуса в коде).

Это также делает ненужным проверять, если элемент уже сосредоточен, как предполагает ответ Тамлина.

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

в angular 2 это сработало для меня, как в Chrome, так и в Firefox:

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

модифицированная версия, которая работала для меня. Первый щелчок выделяет текст, второй щелчок по тому же элементу отменяет выделение текста

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

})