3

The following post relates to a previous question I asked here.

Although the 2 problems are independent they do relate to the same feature that I implementing - predictive text.

The problem I am running into has to do with how the 2 events onblur and onclick are called.

The situation occurs after the user has typed some characters into the text box and decide that they would like to instead click on a suggestion instead of finishing typing the entire word.

I have an onlick handler attached to each suggestion.

However, I also have an onblur handler attached to my textbox.

The problem is that the onblur handler is supposed to CLOSE the suggestions box and destroy its contents.

The onlick handler needs the contents in order to copy the value of the clicked div and copy it into the textbox.

Hence, the dilemma. I can't copy anything if its already been destroyed by the onblur handler.

How do I trap an onblur event, but also at the same time figure out if the onblur was triggered by the user "clicking" on one of the suggestions?

Hope my question makes sense.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
  • So you're saying that when you click on the suggestion the blur fires first and kills it before the click handler can do what it needs to? – Seth May 19 '14 at 19:16
  • @Seth - that's right. If the user clicks on a suggestion, the onblur handler fires first. –  May 19 '14 at 19:18
  • 2
    Paste some code please. Fiddle would also help. – Jonathan May 19 '14 at 19:19
  • 1
    What if you added a short delay to the onblur? Just wrap it in a setTimeout for as long as you think you need. That's one solution. – Seth May 19 '14 at 19:20
  • @Seth - Thanks for that suggestion. I think I'll fall back on that if I can't find a more elegant approach. –  May 19 '14 at 19:30
  • @Jonathan - [Fiddle](http://jsfiddle.net/d5Ysu/) included. The requirements are: (1) suggestions box should close anytime the textfield loses focus. (2) while textfield is in focus and user clicks on any suggestion - the suggestion should get copied into the textfield and then close the suggestions box. As you can see in the example, the onblur fires first and destroys my suggestions. –  May 19 '14 at 22:33

1 Answers1

2

I tried a number of different things including wrapping both my text entry field and my autoFill div in a parent div and setting the onblur on the parent - but nothing worked. Apparently you cannot assign an onblur event on a div (since it cannot get focus to begin with).

The answer was to set a Timeout on the onblur event as Seth has suggested.

onblur="setTimeout(function() {closeSuggestionBox();}, 100);"

I found a good explanation of this on a post here.

Community
  • 1
  • 1
  • 2
    `setTimeout` is not the ideal solution, for the reasons described in my answer here: http://stackoverflow.com/a/36691651/1601953 Basically, you're making the risky assumption that the user will let go of the mouse click within `n` ms, before the element disappears before their eyes. – Chris Apr 18 '16 at 10:46