Question

如何使用jquery（例如

）将页面加载时的css样式设置为某些输入框

$(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 >

但是这会将风格添加到我想要避免的每个输入和文本区域。

如何将所需的样式应用于选择性输入/文本区域字段？

Answer 1

您需要按ID或类标识输入。在您的示例中，您只能通过执行以下操作将类应用于作者文本框：

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

Answer 2

为此，您需要为要应用函数的每个输入和textarea添加唯一的内容。例如，您可以使用class。因此，请为每个textarea和输入选择相同的类名，例如class="switchCSS"。然后你可以像这样应用你的jquery：

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

Answer 3

我建议只使用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/

使用Jquery将css样式添加到选定的输入字段

HTML

3 个答案: