О web-разработке
и даже немного больше...

Выделение всего текста при клике на input

input-text-allocateВ некоторых случаях стандартные поля ввода могут выступать в качестве источника текстовой информации. При этом пользователю предстоит скопировать строку в поле для каких-либо дальнейших действий. Выделение строки по умолчанию в поле ввода происходит стандартным способом, давайте рассмотрим простой пример, как можно сделать так, чтобы текст в поле выделялся самостоятельно при фокусировке на поле.

Для удобства в нашем примере мы будем использовать библиотеку JQuery, поэтому предварительно необходимо её подключить. Что касается разметки, то у нас будет обычный input текстового типа:

<itput type="text" name="url" value="https://href.kz">

Ну и как полагается, сам код, который будет выделять текст в поле ввода:

$("input").focus(function(){
	if(this.value == this.defaultValue){
		this.select();
	}
});

Подобные вещи обычно используется в полях формы, где пользователю предстоит скопировать какую-либо информацию из поля, только и всего. Вот рабочий пример. На этом пока всё, успехов!

Опубликован: 11.10.2015 г.

См. также:

Загрузка файлов на сервер посредством Ajax
Отложенная загрузка изображений Lazy Load
Анимация набора текста на Typed.js
Анимация отсчёта на jquery-spincrement
Mega Dropdown — Меню для мобильной версии
Отслеживаем клик вне элемента на JQuery
Ajax-загрузка записей при скроллинге и нажатии кнопки
Stimed – задаем CSS-стили по времени

Комментарии

  1. Владимир пишет:

    Привет!
    Если на странице несколько input, то выделение работает не на всех

    1. Владимир пишет:

      Самое простое выделение - добавить обработчик событий onclick="this.select();" к самом input.
      Получиться что-то типа <input type="text" size="34" value="" readonly="readonly" onclick="this.select();">
      Тогда все будет работать как надо.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта