CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dan Born
Dan Born

Reputation: 23

Mouse up event triggered while selecting text inside input, causes modal window to hide

I have div containing a form. When user clicks outside of the div it hides - this part works bit to good.

The problem is that while user is selecting text inside div(input, paragraph,...) and his mouse leaves the modal(clicked state), mouseup event is triggered which causes my div to hide.

How do I ignore the mouseup event when user is selecting text?

Here is what my HTML mark up looks like:

<div class="body">
    <button id="show-modal">Toggle modal</button>
    <div class="modal">
        <input type="text" name="opportunity-name" \>
        <button>Submit</button>
    </div>
</div>

CSS:

.body {
    position: absolute;
    width: 100%;
    bottom: 0;
    top: 0;
    height: 100%;
    background: green;
}
div.modal {
    background: blue;
    width: 200px;
    height: 130px;
    margin: 0 auto;
    text-align: center;
    padding-top: 70px;
}

JS:

var $modal = $('div.modal');
$('#show-modal').click(function () {
    $modal.fadeIn();
});

$(document).mouseup(function (e) {
    if (!$(e.target).is('div.modal *, div.modal')) {
        $modal.fadeOut(100);
    }
});

Here's a fiddle

Upvotes: 2

Views: 1024

Answers (1)

elzi
elzi

Reputation: 5672

How do I ignore the mouseup event when user is selecting text?

Check if the text input has focus. Ex:

if ( $(input).is(':focus') ) { ... }

Upvotes: 2

Related Questions