如何在焦點textarea的右上方製作一個清晰的x圖標

Question

我正在使用引導程序3，我想知道如何製作一個清晰的x圖標，當用戶在焦點上時出現的textarea就像youtube一樣評論textarea。

Answer 1

使用一些jQuery焦點/聚焦顯示/隱藏圖標。你可以使用背景圖片。 http://api.jquery.com/focus/

並附加一個單擊事件，它檢查用戶單擊框中的哪個位置。 例如，如果它位於右側0到10px之間，則可以假定他們單擊了您的圖標。

代碼應該是這樣的：

$('#element').focus(function() { 
    $(this).css('background', 'red'); 
}); 

$('#element').focusout(function() { 
    $(this).css('background', 'white'); 
}); 

$('#element').click(function(e) { 
    if (($(this).width()-(e.pageX - $(this).position().left)) < 10){ 
     alert('clear textbox'); 
    } 
}); 

或者更好，鏈接代碼：

$('#element').focus(function() { 
    $(this).css('background', 'red'); 
}).focusout(function() { 
    $(this).css('background', 'white'); 
}).click(function(e) { 
    if (($(this).width()-(e.pageX - $(this).position().left)) < 20){ 
     $(this).val(''); 
    } 
});