HTML how to keep focuing state of input after clicking another element(eg button)

Question

I want to keep focuing state after click a button. Keeping state means:

If <input/> is focused, keep focus after clicking the button;
If <input/> is not focused before, don't focus it after clicking the button.

So, after clicking, as current focusing state of the <input/> is always 'not focus', I want to get the previous focusing state of the <input/>.

The problem is that blur is always called before click event.

What I have tried:

// onclick event
this.$iptPassword.on('click', this.toggleShowPassword);

// callback
toggleShowPassword() {
    console.log(this.$iptPassword.is(':focus')); // always return false
    this.$iptPassword.attr('type', this.$iptPassword.attr('type') === 'password' ? 'text' : 'password');
}

1. There is no HTML element, maybe you want to use `.click .img-eye` instead? 2. please provide the full HTML on a working snippet 3. add `jquery` tag 4. `console.log($iptPassword);` have desired result? — eapo, Nov 26 '19 at 03:45

score 0 · Answer 1 · answered Nov 26 '19 at 06:33

0

Similar question here. But things are more complex in a touch screen.

jQuery: fire click() before blur() event

answered Nov 26 '19 at 06:33

Xixiaxixi

172
10

score 0 · Accepted Answer · answered Nov 27 '19 at 15:14

0

Created a working Plnkr - Toggle input type + Focus state

Introduced 2 variables - "inputWasFocused" & "clickWasOutsideOfScope" - using those variables, I'm able save the last input state (focused / not focused) - before the actual "blur" event

answered Nov 27 '19 at 15:14

Yonatan Ayalon

1,959
18
19

HTML how to keep focuing state of input after clicking another element(eg button)

2 Answers2