добавление стиля CSS в выбранные поля ввода с помощью Jquery

Question

Как я могу установить стиль CSS при загрузке страницы для определенных полей ввода, используя jquery что-то вроде

$(document).ready(function() {
    $("input, textarea").addClass("idle");
    $("input, textarea").focus(function() {
        $(this).addClass("activeField").removeClass("idle");
    }).blur(function() {
        $(this).removeClass("activeField").addClass("idle");
    });
});

HTML

<input type="text" name="author" id="author" >
<input type="text" name=email id=email >

Но это добавит стиль к каждому входуи textarea, которых я хочу избежать.

Как применить желаемый стиль к выборочным полям ввода / текстовой области?

Answer 1

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

$("#author").addClass("idle");

Answer 2

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

input, textarea{
    ...
}

input:focus, textarea:focus{
    ...
}

Я создал быстрый пример, чтобы показать это: http://jsfiddle.net/Gp8Rr/1/

Если вы хотите, чтобы только один (или определенные) входные элементы имели это, вы должны создать определенный класс в css и псевдоклассе, и просто назначить эти классы в своем html.

CSS:

.styled{
    ...
}

.style:focus{
    ...
}

HTML:

<input type="text" name="author" id="author" class="switch">
<input type="text" name="email" id="email">

Еще один быстрый пример этого: http://jsfiddle.net/Apd6V/

Answer 3

Чтобы сделать это, вам нужно добавить что-то уникальное для каждого входа и текстовой области, к которой вы хотите применить свою функцию.Вы можете использовать class например.Итак, присвойте каждой текстовой области и вводу, которые вы хотите выбрать, одно и то же имя класса, например class="switchCSS".Затем вы можете применить свой jquery следующим образом:

$("input.switchCSS, textarea.switchCSS").addClass("idle");
//etc etc