Выбор всего текста в HTML текстовом поле при клике

Предыдущие предложенные решения имеют два недостатка:

1. В Chrome выбор текста с помощью .select() не сохраняется — добавление небольшой задержки решает эту проблему.
2. Невозможно установить курсор в желаемую точку после получения фокуса.

Вот полное решение, которое выделяет весь текст при фокусе, но также позволяет устанавливать курсор в конкретную позицию после фокуса:

$(function () {
    var focusedElement;
    $(document).on('focus', 'input', function () {
        if (focusedElement == this) return; // уже в фокусе, возвращаемся, чтобы пользователь мог установить курсор в конкретной точке ввода.
        focusedElement = this;
        setTimeout(function () { focusedElement.select(); }, 100); // выделяем весь текст в любом поле при фокусе для удобного повторного ввода. Небольшая задержка позволяет фокусу "закрепиться" перед выделением.
    });
});

Это решение эффективно решает обе проблемы и обеспечивает удобство работы с текстовыми полями.

Чтобы сделать так, чтобы при клике на текстовое поле весь текст выделялся, у вас есть два варианта.

Первый вариант: HTML Вам нужно добавить атрибут onclick к каждому элементу input, для которого вы хотите это сделать:

<input type="text" value="кликни на поле, чтобы выделить" onclick="this.select();"/>

ЛУЧШИЙ ВАРИАНТ: jQuery Если вы хотите, чтобы это работало для всех текстовых полей на странице, без необходимости изменять ваш HTML-код, используйте jQuery. Вот пример:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $(document).on('click', 'input[type=text]', function(){ this.select(); });
    });
</script>

Этот код добавляет обработчик событий для всех текстовых полей на странице, и при клике на любое из них текст будет автоматически выделяться.

Примечание: Когда вы используете onclick="this.select()", при первом нажатии все символы будут выделены. После этого, если вы захотите отредактировать что-то в поле ввода и снова кликните среди символов, все символы снова выделятся. Чтобы исправить эту проблему, рекомендуется использовать onfocus вместо onclick.

Я искал решение на чистом CSS и обнаружил, что этот вариант работает в браузерах iOS (тестировал Safari и Chrome).

Однако такое поведение не наблюдается в десктопной версии Chrome, но проблема с выделением там не такая критичная, так как у пользователя есть гораздо больше возможностей (двойной щелчок, ctrl+a и т.д.):

.select-all-on-touch {
    -webkit-user-select: all;
    user-select: all;
}

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

Попробуйте использовать следующий код:

onclick="this.select()"

У меня работает отлично!