Question

我正在使用bootstrap 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('');
    }
});

如何在焦点上的textarea右上角创建一个清晰的x图标

1 个答案: