Question

我目前正在尝试这种逻辑：

   $('input').on('click focusin', function() {
        $('.required').hide();
    });

但它似乎并没有起作用..

这就是标记的样子：

<input type="text" name="Library" id="Library" placeholder="Email Address (again for verification)" data-name="E-mail Address Verification" class="required"/>

CSS，基本上我只想隐藏这个背景图片，而不是在jQuery / css链接中显示背景。或者在整个必填字段中都不显示......但这两种意识形态似乎都不起作用。

.field_holder .required {
    background: url("../images/required_field_star_bg.png") no-repeat;
    background-position: 11px 11px;
}

Answer 1

CSS中有一个标记为:focus的psuedo类（以及:required和:valid），它允许您更改焦点对齐的输入元素的值。

我还修改了你的JavaScript，问题是你要找的事件简称为focus - 你甚至不需要click事件！无论如何，focus 总是'进入'元素。

下面是代码：

$('input').on('focus', function() {
    $(this).css('border','1px solid red');
});

input:required {
  background: url("http://placehold.it/200x200") no-repeat 50% 50%;
}
input:required:focus {
  background: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" name="Library" id="Library" placeholder="Name" required />

Answer 2

你不需要javascript / jquery，你可以使用:focus伪类来使用纯css：

.field_holder .required {
    background: url("../images/required_field_star_bg.png") no-repeat;
    background-position: 11px 11px;
}

.field_holder .required:focus {
    background-image: none;
}

输入表单字段中的背景图像清除焦点

2 个答案: