Меню Закрыть

Jquery input type text

Содержание

Материал из JQuery

Соответствует элементам, которые являются текстовыми полями (input-элементы с типом text).

Замечание 1: использовать фильтр без предшествующего селектора (то есть $(":text") вместо $("selector:text")) не рекомендуется, поскольку это эквивалентно $("*:text"), а универсальный селектор "*" работает очень медленно. Лучше будет использовать такую запись: $("input:text").

Замечание 2: "input:text" сработает так же, как и селектор по атрибутам "[type=text]". Однако, рекомендуется использовать первый вариант.

$(".formBox input:text") вернет текстовые поля, находящиеся внутри элементов с классом formBox.

В действии

Найдем текстовые поля на странице и выделим их красной рамкой:

На этом уроке мы познакомимся с селекторами элементов формы, которые будем использовать в качестве аргумента функции jQuery("селектор") для выбора элементов.

Назначение селекторов элементов формы

Селекторы элементов формы предназначены для выбора элементов в зависимости от:

  • их типа (значения атрибута type ) — :button , :checkbox , :file , :image , :password , :radio , :reset , :submit , :text .
  • того, является ли их тег input , textarea , select или button — :input .
  • того, находится ли элемент в фокусе или нет — :focus .
  • того, находятся ли элементы в активном состоянии ( :enabled ) или не активном ( :disabled ).
  • того, находятся ли элементы option в состоянии selected или нет — :selected .
  • того, находятся ли элементы checkbox , select и radio в состоянии selected или нет — :checked .

Селекторы элементов формы

:button — выбирает все элементы button и элементы с type="button" . Селектор $(":button") эквивалентен $("button, input[type=’button’]") .

Например, выбрать все элементы button или элементы с type="button" , которые расположены внутри формы:

:checkbox — выбирает все элементы с type="checkbox" . Селектор $(":checkbox") эквивалентен $("[type=checkbox]") .

Перед селектором :checkbox как и перед селекторами псевдоклассов (т.е. теми которые начинаются со знака " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если перед знаком " : " ничего не указывать, то подразумевается использование универсального селектора ( * ). Другими словами, $(":checkbox") эквивалент $("*:checkbox") . Но более правильно в этом случае вместо * использовать тег input : $("input:checkbox") .

Читайте также:  Brother 1512 сброс счетчика тонера через меню

Например, выбрать все элементы input , которые имеют атрибут type="checkbox" , т.е. являются флаговыми кнопками:

:checked — выбирает все элементы с состоянием checked или selected . Селектор :checked предназначен для элементов checkbox , select и кнопок radio .

:disabled — выбирает все элементы, которые отключены (disabled).

Перед селектором :disabled как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":disabled") эквивалентен $("*:disabled") . Но в этом случае более правильно вместо " * " использовать тега input : $("input:disabled") .

Селектор :disabled отличается от селектора атрибута [disabled] . Селектор :disabled проверяет логическое значение (истина/ложь) свойства disabled элемента, в то время как селектор атрибута [disabled] просто проверяет наличие атрибута disabled у элемента.

Селектор :disabled можно использовать только для выбора HTML-элементов, которые поддерживают атрибут disabled : , , , ,

:submit — выбирает все элементы с type="submit" . Селектор :submit предназначен для элементов button или input .

:text — выбирает все элементы с type="text" .

jQuery функция $(":text") позволяет нам выбрать элементы . Перед селектором :text как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":text") эквивалентен $("*:text") . Но более правильно этом случае вместо " * " использовать тег input : $("input:text") .

Начиная с версии jQuery 1.5.2, селектор :input также выбирает элементы input , у которых не указан атрибут type (в этом случае подразумевается, что элемент имеет type="text" ).

Читайте также:  Как заправить чернила в принтер epson l800

Разницу между $(":text") и $("[type=text]" ) продемонстрируем на следующем примере:

Предположим, что на веб-странице есть текстовое поле вот такого формата.

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

Здесь есть два варианта:

1. Нам нужен текст, который задан для текстового поля по умолчанию в атрибуте value.

В этом случае, получить значение этого атрибута можно вот так:

Как это работает, можно посмотреть на следующем живом примере.

2. Нужен текст, который пользователь будет вводить в это текстовое поле.

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

Посмотрите на следующий пример и попробуйте ввести в это текстовое поле какой-либо текст.

Рекомендуем к прочтению

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

Ваш адрес email не будет опубликован.