фонового изображения в поле ввода формы, чтобы очистить от фокуса

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"/> 

СМЧ, в основном я просто хочу, чтобы скрыть это фоновое изображение, а фон дисплея никто в JQuery/CSS сцепления. или не отображать ни одного во все необходимое поле ... но ни одна из идеологий не работает.

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

Answer 1

Там есть класс в CSS псевдо маркированы :focus (а также :required и :valid), что позволяет изменять значения для входных элементов, находящихся в фокусе.

Я также внесла изменения в ваш JavaScript, проблема в том, что событие, которое вы ищете, просто называется focus - для этого вам даже не нужно событие click! A focusвсегда «в» элемент в любом случае.

Heres код:

$('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 для этого, вы можете сделать это с чистым CSS, используя :focus псевдо-класс:

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

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