check if a button is clicked jquery

Question

I am going to make my question as short as possible. I have a textarea that gets hidden whenever it is blurred :

$('textarea').on('blur', function(){
    $(this).hide()
})

I want to check first wither a button is clicked or not

if clicked => keep the textarea showen
if not clicked => hide the textarea

the only problem is that the button i want to check is the same button that made the textarea visible

$('button').click(function(){
    $('textarea').show().focus()
})

So I do not want the textarea to flash whenever i click the button (prevent it from hiding if the button is clicked, and let it hide in peace if it's blurred on other element)
this is a Demo
I thought of making a flag but it's a dilemma

score 3 · Accepted Answer · edited May 23 '17 at 10:28

i found the answer to my question (thanks to Zee Tee for the negative point)
i give the credits to this post here, for what i got to
all is needed is to check which element has been clicked on the document document.activeElement

$('textarea').on('focusout', function(){
$(document).mouseup(function(){
    if(document.activeElement.tagName!=='BUTTON'){
    $('textarea').hide()
    }
})

this is a working updated Demo
the textarea doesn't flash whenever i click the button after this
thanks to everyone for their effort

Control Freak · Answer 2 · 2014-09-13T16:22:07.700

1

I don't see a need for a blur() call, when all you want to do is have your button handle the show/hide of the textarea.

 $("button").click(function(e){ 
   $("textarea").toggle();
 });

Fiddle: http://jsfiddle.net/9suamkbm/4/

edited Sep 13 '14 at 16:22

answered Sep 13 '14 at 16:14

Control Freak

12,965
30
94
145

Your question is contradicting. If you want your `textarea` to stay visible only if the button is clicked, then why do you need a `blur()` on the `textarea`? Just have the button show/hide the `textarea`, because if the button is not clicked, the `textarea` isn't there anyways. – Control Freak Sep 13 '14 at 16:25
your answer is contradicting : i want the textarea to stay visible only if the button is clicked => that's correct toggle() doesn't keep it always showen – Sep 13 '14 at 16:30
When do you want it to hide? – Control Freak Sep 13 '14 at 16:32
If this isn't what you're looking for you need to re-evaluate your logic, because either there is a missing piece to the puzzle you're not providing, or you're just confused about your logic. Your textarea is hidden on load, the only way to view it is to click the button right? And the only way to hide it is to click the same button right? How does this code not do what you want it to? – Control Freak Sep 13 '14 at 16:36
i want to hide when it loses focus (onblur) + when the button is not clicked, just that simple in other words when u blur on any other element except the button – Sep 13 '14 at 16:37

score 0 · Answer 3 · answered Sep 13 '14 at 16:06

0

I suggest you to keep a flag for checking whether it is clicked or not. You can try this....

var isClick = false;
$('textarea').on('blur', function(){
    if(isClick == false){
        $(this).hide()
    }
})
$('button').click(function(){
    isClick = true;
    $('textarea').show().focus()
})

answered Sep 13 '14 at 16:06

MH2K9

11,951
7
32
49

basically when you click the button, isClicked turns true, so when you blur from the textarea it wont hide ever, even if it was clicked on anywhere else i thought of making a flag but it's a dilemma i need some other statement somewhere to turn isClicked false if anything else except the button is clicked – Sep 13 '14 at 16:26
any jsfiddle please ? – Sep 13 '14 at 16:43
the provided solution is working thanks, except one little detail is that the textarea is set to be hidden by default (the thing that i added in this [**update**](http://jsfiddle.net/rehstLL9/1/) except one little bug is that it's not working when you click for the first time outside the textarea, you need to click back (to set the focus on it then click outside) i found a solution with very small piece of codes, please take a look at it +1 point for you – Sep 13 '14 at 17:07

Ohgodwhy · Answer 4 · 2014-09-13T16:29:57.667

0

Check if the related target of the event object returned from the blur function is the button or not.

$('textarea').on('blur', function (e) {
    if (!e.relatedTarget.tagName == 'BUTTON') {
        $(this).hide()
    }
})


$('button').click(function () {
    $('textarea').show().focus()
})

jsFiddle

edited Sep 13 '14 at 16:29

answered Sep 13 '14 at 16:08

Ohgodwhy

49,779
11
80
110

`!e.relatedTarget = 'button'` doesn't work, i tried `e.relatedTarget !== 'button'` and the got it to hide the textarea, but still flashes anytime you click the button – Sep 13 '14 at 16:18
@Amine Please check the jsFiddle and the code again. – Ohgodwhy Sep 13 '14 at 16:18
@Ohgodwhy when you blur outside the textarea is still there ! it's not working – Sep 13 '14 at 16:20
@Amine Check the new fiddle. – Ohgodwhy Sep 13 '14 at 16:30

check if a button is clicked jquery

4 Answers4