如何刪除輸入佔位符文本焦點與jQuery？

這是我的HTML：如何刪除輸入佔位符文本焦點與jQuery？

<div class="testimonial-form__field testimonial-form__company-name"> 
    <span class="wpcf7-form-control-wrap company-name"> 
     <input type="text" name="company-name"> 
    </span> 
    ::after 
</div>

我無法寫一個jQuery片段刪除/隱藏::僞元素之後，當輸入進來的焦點。具體遍歷DOM輸入和輸出。

$('.testimonial-form__field input').css("display", "none");

這是關於我的JS知識的程度。我知道我需要從選擇輸入開始，並通過在僞元素上應用隱藏結束。我只是不知道如何編寫這個函數。

來源

2015-08-26 cstauf2

僞元素':: after'很可能是從CSS生成的，你應該看看CSS，不jQuery的 – Neverever

我已經試過了。據我所知是沒有辦法使用::焦點狀態輸入和遍歷向上和向外用CSS DOM的，因爲不存在家長選擇。 – cstauf2

你可以監聽*「焦點」 *事件輸入，遍歷到父和切換對應於像'.someClass一些CSS類：{後內容：無; }' – Phil

我輸入建議關注你只是一個類添加到.testimonial-form__company名div元素。當發生這種情況時，您只需添加一個CSS類來隱藏:: after psuedo元素。

退房：http://jsfiddle.net/c5a19byk/

<style> 
    .testimonial-form__company-name::after { 
    content: "not focused"; 
    display: block; 
    } 
    .testimonial-form__company-name.active::after { 
    display: none; 
    } 
</style> 

<div class="testimonial-form__field testimonial-form__company-name"> 
    <span class="wpcf7-form-control-wrap company-name"> 
    Input: <input type="text" name="company-name"> 
    </span> 
</div> 

<script> 
    $('.testimonial-form__company-name input').focus(function() { 
    $(this).closest('.testimonial-form__company-name').addClass('active'); 
    }).blur(function() { 
    $(this).closest('.testimonial-form__company-name').removeClass('active'); 
    }); 
</script>

來源

2015-08-26 01:28:41

這正是我一直在尋找。謝謝 – cstauf2

如何刪除輸入佔位符文本焦點與jQuery？

回答

相關問題