1

I have a span and a text input next to each other, named "one" and "two" respectively; with only one showing at a time. When you double click "one", it becomes hidden while showing and focusing on "two". When "two" is blurred, it hides and shows "one". Easy enough, the problem manifests when I try to blur "two" when the enter key is pressed. Here is what I have:

.bind({'blur keyup': (function(e){
  if(e.type === 'keyup' && e.keyCode !== 10 && e.keyCode !== 13) return;
  $([this,$(this).prev()]).toggle(); })
 })

When the enter key is pressed, the toggle occurs but fires again when you click anywhere. So it seems blur fires, but "two" retains focus. Here is a fiddle has the two listeners separated (keyup and blur) as well as some extra to help highlight what's happening.

I tried

  • adding e.preventDefault()
  • adding return false (before blur) --> Kills the rest of the function (as expected)
  • adding return false (after blur) --> Disables the enter key (??) or after:
    • keyup: (return function(e){ --> jQuery doesn't like this syntax
  • Performing .toggle() in a different function --> No difference, unless:
    • setTimeout (even with time of 0) --> Issue goes away
  • Using a different listener (key[down/press]) --> No difference
  • Calling a separate function -> No difference

Question: How can I fix this? The expected behavior is that pressing the enter key yields the same action as blur.

Gary
  • 13,303
  • 18
  • 49
  • 71
  • Instead of forcing a blur in the keyup handler, you could just set the focus to another element – Christian Apr 26 '12 at 01:25
  • While that does work, I don't really have another input that I want to switch focus to. It would be ideal if I could "focus" on the document itself or (preferably) find what's causing this behavior. – Gary Apr 26 '12 at 01:36
  • 1
    Actually this is quite interesting, if you don't hide the input, triggering blur works fine. The toggling of the input causes the issue! – Christian Apr 26 '12 at 01:41
  • I guess jQuery just wants to pick on me. – Gary Apr 26 '12 at 02:06
  • I tried with classes as well, and the problem persists. It'll be good when we figure this one out :) – Christian Apr 26 '12 at 02:10
  • Just for thoroughness-sake I set the display instead of using .toggle() -- No difference (not that I expected it to). – Gary Apr 27 '12 at 00:32
  • I'm aware `bind` accepts objects, but i didn't know you could have multiple events on the key portion of the object. That is to say wouldn't you need to `.bind({'blur':myFunc,'keyup':myFunc});` then define `myFunc`? – Brad Christie Apr 27 '12 at 00:35
  • I didn't either until I read [this answer](http://stackoverflow.com/questions/5432428/jquery-blur-and-the-enter-key). However, in my fiddle, 'blur' and 'keyup' are separated to eliminate this confusion. – Gary Apr 27 '12 at 00:37
  • @gary: That question doesn't pass `{'x y':func}` it passes just `'x y'.func` (string and func and not an object). Either way, just saw your code and was curious. – Brad Christie Apr 27 '12 at 00:53

1 Answers1

1

Although I'm not sure why, I was being killed by jQuery's blur method. I was able to solve my problem by separating the two handlers and using JavaScript's native blur method.

keyup: (function(e){
  if(e.keyCode===10 || e.keyCode===13){ this.blur(); }
}),
blur: (function(){
  $([this,$(this).prev()]).toggle();
})

I'll leave this open until I or someone else can identify why jQuery's blur is behaving this way.

Gary
  • 13,303
  • 18
  • 49
  • 71