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

Быстрый ответ

Чтобы обеспечить интерактивность интерфейса вашего сайта, используйте событие клика JavaScript вместе с методом element.select() для текстовых полей. Так, содержимое поля автоматически выделяется при клике пользователя.

document.querySelector('input[type="text"]').onclick = function() { this.select(); };

Сфокусируйте внимание пользователя на текстовом поле, предоставив возможность мгновенного выделения, редактирования или копирования текста.

Добавляем интерактивность с onClick

Используйте событие onClick в сочетании с методом this.select(), чтобы обеспечить возможность быстрого и легкого выделения всего текста в поле. Поле должно иметь атрибут type="text" для корректной работы этого функционала.

jQuery на высоте

Примените метод jQuery для добавления динамичности в код:

$(document).on('click', 'input[type="text"]', function() {
  this.select();
});

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

Точность и настойчивость

Учтите, что для некоторых браузеров, таких как Chrome, потребуется использование setTimeout() для обеспечения надежного выделения текста.

document.querySelector('input[type="text"]').addEventListener('click', function(event) {
  setTimeout(() => { event.target.select(); }, 1);
});

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

let focusedElement;

document.addEventListener('focus', function(event) {
  if (event.target.tagName === 'INPUT' && event.target === focusedElement) {
    return;
  }
  focusedElement = event.target;
}, true);

Использование contenteditable

Примените contenteditable для управления выборкой текста с использованием API Range:

function selectContentEditableText(element) {
  const range = document.createRange();
  range.selectNodeContents(element);
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}

Старайтесь избегать устаревшего document.execCommand('selectall', null, false);.

Наполнения placeholder и доступность

Текст-подсказка в placeholder должен быть кратким и информативным. Для улучшения доступности используйте метки, которые легко распознать.

<label for="inputField">Текстовое поле: </label>
<input id="inputField" type="text" placeholder="Начните печатать..." onClick="this.select();" />

Контроль за позицией курсора

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

document.querySelector('input[type="text"]').addEventListener('mouseup', function(event) {
  event.preventDefault();
});

А для улучшения пользовательского опыта и доступности стоит добавить функционал автозаполнения.

<input type="text" list="suggestions" onClick="this.select();" />
<datalist id="suggestions">
  <option value="Предложение 1"></option>
  ...
</datalist>

И подключите jQuery из надежного источника, например, CDN от Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Визуализация

Текстовое поле можно представить как море символов, а клик мышью — как вложение в сеть и захват всего содержимого.

Текстовое поле до клика:

🌊🅰️BC🌊🌊DEFG🌊HIJ🌊🌊KL🌊MNOP🌊

После клика:

🥅🅰️BCDEFGHIJKLMNOP🥅

Одно нажатие – и весь текст выделен, словно по магии.

Полезные материалы

1. EventTarget: метод addEventListener() – Веб API | MDN — подробное изучение метода addEventListener() в JavaScript.
2. HTMLInputElement: метод select() – Веб API | MDN — главное руководство по работе с методом select() в текстовых полях.
3. JavaScript – Выделение всего текста в HTML поле ввода при клике – Stack Overflow — различные стратегии выделения текста в текстовых полях.
4. jQuery Select Box Manipulation — SitePoint — подробный разбор манипуляций над select-элементами с помощью jQuery.
5. Фокусировка: focus/blur — учебник по управлению фокусом в JavaScript.