背景圖像清除焦點

Question

目前我正在試圖這樣的邏輯：

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

但它似乎並沒有在所有工作..

這是什麼標誌-up的樣子：

<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（以及: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; 
}