Focusout if not elements is clicked (see fiddle)

Question

I have an "clear"-icon dynamically showing up in my input-field when I write something. Keypress and focus events handle that well, the only thing is that I want the icon to be removed when the input field is not in focus mode. The problem is that I have a click event on the icon, so if I click the icon, the focusout-event fires. I can't figure it out.

$(".searchInput").focusout(function(e) {
    console.log(e);

    if(e.currentTarget != this) {
        if ($(".keypress").length > 0) {
            $(".keypress").remove();
        }
    }
})

I've put together a little fiddle: http://jsfiddle.net/w9RbW/.

As you can see, if the input value isn't empty, the icon is still there, I don't know how to check if it's being clicked, or something like that...

Hmm, a black little box should appear to the side of the input field if you type something in it. — oskarno, Jan 16 '13 at 16:05

Adil Shaikh · Answer 1 · 2013-01-16T16:24:20.583

1

See this http://jsfiddle.net/w9RbW/8/

If you only want to remove icon when not in focus.

    $(".searchInput").focusout(function(e) {
  $(".keypress").css('opacity', '0');
        if(e.currentTarget != this) {
            if ($(".keypress").length > 0) {
                $(".keypress").remove();
            }
        }
    })

edited Jan 16 '13 at 16:24

answered Jan 16 '13 at 16:06

Adil Shaikh

44,509
17
89
111

Yes, that I do know. But the "clear"-icon should be clickable and clear the input field, maybe I wasn't so clear on that. So, this should work, but also the click event. – oskarno Jan 16 '13 at 16:08
Nope. The icon should Never be visible if the input doesn't have focus, or if there isn't anything written. – oskarno Jan 16 '13 at 16:14
adding $(".keypress").css('opacity', '0'); will do the work see edit – Adil Shaikh Jan 16 '13 at 16:25
No, this is the same thing as before, now you can't click the icon, because the focusout fires before and hides it. – oskarno Jan 16 '13 at 16:28

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

why don't you set a timer for checking every 10 seconds whether 'clear' icon is there or not! Once you have found that textbox has lost focus, then you can remove that clear icon and stop that timer

Using jQuery to test if an input has focus

edited May 23 '17 at 12:27

Community

1
1

answered Jan 16 '13 at 16:07

gurvinder372

66,980
10
72
94

Sounds like a detour, I should be able to just remove it if I don't click the icon, somehow. – oskarno Jan 16 '13 at 16:12
Yes, ideally clear icon should be removed on 'blur' or 'onmouseout' event. – gurvinder372 Jan 16 '13 at 16:40

score 0 · Answer 3 · answered Jan 16 '13 at 16:16

0

As workaround you can set/remove some flag on icon mouseover/out and check it in focusout event.

answered Jan 16 '13 at 16:16

antejan

2,594
12
15

Hmm, I don't think I follow, perhaps you can give me an example? The fiddle is in the question. – oskarno Jan 16 '13 at 16:23

techfoobar · Accepted Answer · 2013-01-16T19:04:18.467

The problem (as you know) is that the clear icon is getting removed before its click event is fired when you focus-out from the text-box. One possible solution is altering the opacity of the clear icon instead of removing it, so that it still continues to receive events.

Demo: http://jsfiddle.net/w9RbW/10/

// Have the clear icon in there all the time
$("<span class='keypress'><i class='icon-remove-sign'></i></span>").appendTo($(".searchInput").parent()); 

$(".keypress").click(function(e) {
  if($(this).css('opacity') == 0) return;
  $(".searchInput").val("").focus();
  $(this).css('opacity', '0'); // hide it after clearing the text
})

// focusout
$(".searchInput").blur(function(e) {
  $(".keypress").css('opacity', '0'); // hide it on blur
})

$(".searchInput").focus(function() {
  if ($(".searchInput").val() != "") {
    $(".keypress").css('opacity', '1'); // show it
  }
})

$(".searchInput").keyup(function() {
  if($(this).val() != "") {
    $(".keypress").css('opacity', '1');
  } else {
    $(".keypress").css('opacity', '0');
  }
})

Yes, exactly, therefore I thought you could just check perhaps whether the icon is hovered or something. This solution works, but you can still click and erase. — oskarno, Jan 16 '13 at 16:20
Code slightly modified so as to negate the click if the icon is not visible. Check the updated answer and demo. — techfoobar, Jan 16 '13 at 19:05
Ah, yes, that seems more user-friendly, especially when it's going to be used on smartphones with all the clumsy fingers. This was my thought at first too, but It'll do. Thanks! — oskarno, Jan 16 '13 at 19:21

Focusout if not elements is clicked (see fiddle)

4 Answers4