2

I have a button with a bootstrap element on it.

<button title="delete" type="button"  class="btn btn-default btn-sr"  data-confirm="Are you sure to delete this item?"><span class="glyphicon glyphicon-trash white"></span></button></a>';

It has a css property which I color it red.

When user clicks the delete button, a JavaScript confirmation will come out.

The problem is whenever i click cancel, the button will be focused. How do I remove the focused button?

Here is the jQuery code:

<script>
    $(document).on('click', ':not(form)[data-confirm]', function(e) {
        if( !confirm($(this).data('confirm')) ) {
            e.stopImmediatePropagation();
            e.preventDefault();
        }
    });
</script>
D4V1D
  • 5,615
  • 3
  • 28
  • 61
KingJ
  • 103
  • 1
  • 7
  • look at this: > https://stackoverflow.com/questions/2520650/how-do-you-clear-the-focus-in-javascript – Ali Mardan Dec 06 '18 at 16:40
  • 1
    If you plan to support the blind and those needing ARAI tags, then you _should_ leave the focus where it was before opening the dialog. Otherwise it gets confusing for the user not knowing where the focus was put. – Intervalia Dec 06 '18 at 16:42

3 Answers3

2

Maybe could you try to blur() the button?

<script>
    $(document).on('click', ':not(form)[data-confirm]', function(e) {
        if( !confirm($(this).data('confirm')) ) {
            e.stopImmediatePropagation();
            e.preventDefault();
            $(this).blur(); // to make the focus disappear
        }
    });
</script>
D4V1D
  • 5,615
  • 3
  • 28
  • 61
0
$(this).blur();

removes the focus

simonecosci
  • 1,079
  • 6
  • 13
0
$(this).blur();

over

document.activeElement.blur()
FloatingRock
  • 6,205
  • 5
  • 39
  • 68
Xanlantos
  • 789
  • 8
  • 17