如何在焦点上的文本区域的右上角创建清晰的x图标

Question

我正在使用bootstrap 3，我想知道如何制作一个带有清晰x图标的文本区，就像youtube做评论文本区一样。

Answer 1

使用一些jQuery focus/focusout来显示/隐藏图标。你可以使用背景图像来实现。http://api.jquery.com/focus/

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