Jquery 如何在焦点文本区域右上角清晰显示x图标

我正在使用bootstrap 3，我想知道如何制作一个带有清晰x图标的文本区域，当用户处于焦点位置时，该图标就会出现，就像youtube制作评论文本区域一样。

使用一些jQuery focus/focusout来显示/隐藏图标。你可以用背景图像。

并附加一个单击事件，该事件检查用户在框中单击的位置。 例如，如果从右边看它在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');
    }
});

$（'#元素'）。焦点（函数（）{
$（this.css（'background'，'red'）；
});
$（“#元素”）.focusout（函数（）{
$（this.css（'background'，'white'）；
});
$（“#元素”）。单击（函数（e）{
如果（$（this.width（）-（e.pageX-$（this.position（）.left））<10）{
警报（“清除文本框”）；
}
});

或者更好的是，链接代码：

$('#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('');
    }
});

$（'#元素'）。焦点（函数（）{
$（this.css（'background'，'red'）；
}).focusout（函数（）{
$（this.css（'background'，'white'）；
})。单击（功能（e）{
如果（$（this.width（）-（e.pageX-$（this.position（）.left））<20）{
$（this.val（“”）；
}
});