3

I have an input element inside a Jquery-UI selectable element. And I want to fire the blur event when clicking outside the input, but it's not possible, because of the container, the selectable element stops propagating the mousedown.

Example here.

How can I fire the blur event?

István
  • 5,057
  • 10
  • 38
  • 67

1 Answers1

2

I come across these problems a lot while working on complex UI stuff, here give this a try:

http://jsfiddle.net/LNtqE/5/

What the code is doing is registering a psuedo-blur event to the document that will only fire once, then unbind itself. The event will only fire if the target is NOT the input that registered it... this could work for all inputs, or specific ones depending on what you feed to the selector :)

$(document).ready(function(){

    $('#selectable').selectable({});

    $("input").on("focus", function(e) {

        var $input = $(this);

        $(document).on("mouseup", function(e2) {

            if( !$(e2.target).is( $input )) {

                $input.trigger("blur");
                $(this).off(e2);

            }

        });

    });

});
simey.me
  • 2,147
  • 1
  • 19
  • 21
  • 1
    you could change `mouseup` to `mousedown` that fits your use better – simey.me Oct 06 '14 at 09:33
  • 1
    `mousedown` will be better for most people... with `mouse up`, highlighting text and dragging the cursor out of the input will trigger mouse up, there for triggering blur, which in turn unselects whatever the user has selected. This is very annoying for the user for smaller inputs. – Steel Nation Jun 20 '16 at 17:20