javascript onblur starts too soon

Question

I have a div containing an input followed by an ul :

ul area is filled using Ajax : onkeyup and onfocus are used for searching values in a database depending on what has been seized in input area, so user can choose among that values by clic on the right one. Value is then moved into input area. onBlur is used to empty ul area when user leaves input area. If necessary, I can give javascript code.

One li looks like that : value

The problem is that it seems onBlur starts before moving value into input area. So ul's content disappears before moving and so move doesn't work.

The only way I've found to solve that problem is to use setTimeout on function used by onBlur. It works well but I would like to know if there's another way.

Thanks.

Hi Schonke-- welcome to StackOverflow. I definitely think you should include some code-- if possible, a reproducible snippet of this problem would be very helpful-- you can create one by clicking the icon of a sheet of paper with "< >" on it at the top of the question input text box. If you are interested in how to best formulate a question for the community I suggest reviewing [ask]. Welcome! — Alexander Nied, Apr 26 '17 at 12:26

score 0 · Answer 1 · answered Apr 26 '17 at 12:26

0

HTML code :

<div class="inputListDiv">
<input type="text" name="name" id="name" onkeyup="request(readData, this.value, this.id, 'listSel');" onFocus="request(readData, this.value, this.id, 'listSel');" onBlur="waitSupprList('listSel');">
    <ul id="listSel" class="inputListNo"></ul>
</div>

One li :

<li onClick="document.getElementById('name').value = value; document.getElementById('listSel').innerHTML = '';"><div>value</div></li>

answered Apr 26 '17 at 12:26

Schonke

11
5

Did you mean to make this a component of your question? Or are you posting an answer to your own question? – Alexander Nied Apr 26 '17 at 12:27
i think he is posting answer of his question. – Badshah Sahib Apr 26 '17 at 12:29
Hi, it's not an answer. I'm new on stackoverflow and because of an error on my side code was not inserted. So :"HTML code" is for my div and "One li" is for – Schonke Apr 27 '17 at 12:23
"One li looks like that". – Schonke Apr 27 '17 at 12:24

score 0 · Answer 2 · answered Apr 27 '17 at 12:27

I repeat my question with code :

I have a div containing an input followed by an ul :

<div class="inputListDiv">
<input type="text" name="name" id="name" onkeyup="request(readData, this.value, this.id, 'listSel');" onFocus="request(readData, this.value, this.id, 'listSel');" onBlur="waitSupprList('listSel');">
<ul id="listSel" class="inputListNo"></ul>
</div>

ul area is filled using Ajax : onkeyup and onfocus are used for searching values in a database depending on what has been seized in input area, so user can choose among that values by clic on the right one. Value is then moved into input area. onBlur is used to empty ul area when user leaves input area. If necessary, I can give javascript code.

One li looks like that :

<li onClick="document.getElementById('name').value = value; document.getElementById('listSel').innerHTML = '';"><div>value</div></li>

The problem is that it seems onBlur starts before moving value into input area. So ul's content disappears before moving and so move doesn't work.

The only way I've found to solve that problem is to use setTimeout on function used by onBlur. It works well but I would like to know if there's another way.

Thanks.

This problem occurs because clic on li is outside of input area so several events will start, that one of onBlur on input area and that one of onClick on li area. It seems onBlur is faster so onClick has no effect. — Schonke, Apr 27 '17 at 15:45

score 0 · Answer 3 · answered Apr 27 '17 at 13:26

I'm tired, I'll go to bed :-) My answer was on wrong page. Shoot again :

I have a div containing an input followed by an ul :

<div class="inputListDiv">
<input type="text" name="name" id="name" onkeyup="request(readData, this.value, this.id, 'listSel');" onFocus="request(readData, this.value, this.id, 'listSel');" onBlur="waitSupprList('listSel');">
<ul id="listSel" class="inputListNo"></ul>
</div>

ul area is filled using Ajax : onkeyup and onfocus are used for searching values in a database depending on what has been seized in input area, so user can choose among that values by clic on the right one. Value is then moved into input area. onBlur is used to empty ul area when user leaves input area. If necessary, I can give javascript code.

One li looks like that :

<li onClick="document.getElementById('name').value = value; document.getElementById('listSel').innerHTML = '';"><div>value</div></li>

The problem is that it seems onBlur starts before moving value into input area. So ul's content disappears before moving and so move doesn't work.

The only way I've found to solve that problem is to use setTimeout on function used by onBlur. It works well but I would like to know if there's another way.

Thanks.

javascript onblur starts too soon

3 Answers3