Understand focusin and mousedown

JavaScript
#1

http://jsfiddle.net/nf98ge51/1/

So for this have to separate something? I mean like focusin can be used for input fields? And mousedown only for button elements? I just got in my head really not have to use this same both times as is useless?

Any explain idea?

Thanks!

#2

Click on the empty white-space in the preview. Then press TAB button. that will ‘focus’ on the input and turn it red. then if you click it will turn green.

Take a look at the example here; notice how the background is yellow when you click on either input box. https://www.w3schools.com/jquery/event_focusin.asp

1 Like
#3

mousedown is a half click, it applies to anything mouse clicks on. Normally you want to use click instead, so user have a chance to change his mind, because in order to click event to fire both mousedown and mouseup should be on top of the same element. You can try it yourself: point mouse to any link, press mouse, then move mouse away and un-press - everyone deserves a second chance :slight_smile:

focus can be use used on any focusable element, natively on input, button, a etc. as well as any other element you program to be focusable by using tabindex=0.

More here:

1 Like
#4

And what about order event like both? So first is mousedown after the click event? and mouseup? Or this not correct? Like can not use mousedown after use click?

Thanks!

#5

You really shouldn’t post duplicate posts, it’s quite confusing

What’s your final goal with the input? If you want to change border on focus, then in CSS:

input :focus {
  border: 2px solid red;
}
/* If you want to get rid of blue outline then add this: */
input {
  outline: none;
}

It looks like you’re overcomplicating things for yourself

1 Like
#6

http://jsfiddle.net/3w1gs50z/

Well that blue border is not want to show always do the focusout one? So this case just on input not possible event that mouseup event?

Thanks!

#7