jQuery метод .select()

Определение и применение

jQuery метод .select() привязывает JavaScript обработчик событий "select" (срабатывает при выделении текста), или запускает это событие на выбранный элемент. Метод используется с элементом <input> (с текстовым типом type = "text") и элементом <textarea>.

jQuery синтаксис:

Синтаксис 1.0:

JavaScript

$( selector ).select() // метод используется без параметров

$( selector ).select( handler )

handler - Function( Event eventObject )

Синтаксис 1.4.3:

JavaScript

$( selector ).select( eventData, handler )

eventData - Anything

handler - Function( Event eventObject )

Обращаю Ваше внимание, что метод .select(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

JavaScript

$( selector ).on( "select", handler )

$( selector ).trigger( "select" )

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.4.3)

Значения параметров

Параметр	Описание
eventData	Объект, содержащий данные, которые будут переданы в обработчик событий.
handler	Функция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект `Event`.

Пример старого кода

Пример использования jQuery метода .select() (без параметров и с функцией)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html

HTML

<button>Клик</button><br />
<input value="Выдели меня" /><br />
<textarea>Выдели меня</textarea>
<p></p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('input').select()
    })
    var num = 0
    $('input, textarea').select(function () {
        num++
        $('p').text('Текст выделен: ' + num + ' раз')
    })
})

В этом примере с использованием jQuery метода .select() мы при нажатии на элемент <button> (кнопка) вызываем событие "select" на элементе <input>. Если вызвать событие на элементе <textarea> эффект будет тот же, так как у нас задействован групповой селектор.

Элементам <input> и <textarea> задали, что при срабатывании события "select" выполнить функцию, которая с использованием метода .text() добавляет текстовое содержимое со значением переменной, которая содержит количество срабатывания события "select".

Обратите внимание на то, что метод .select(), вызванный без параметров может вызывать событие "select" многократно в браузере Chrome, увеличивая счетчик не на один, а на два, а то и на три.