StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POtextarea blurs when clicking inside
text
Body
copied!<p>I have a field in an HTML table in which the user can edit the values. When the user clicks one of the cells of that field, a textarea appears at this cell, the user edits whatever he wants and when he clicks outside of that textarea, it goes back to normal text. You know, standard stuff.</p> <p><img src="https://i.stack.imgur.com/C4MUP.jpg" alt="textarea editor"></p> <p>All of this is working properly with <em>onfocus</em> and <em>onblur</em> events, except for one thing : when I click <strong>inside</strong> the textarea (Ex.: I want to edit a certain part of the text by clicking between two letters), the <strong>onblur</strong> event is still called, thus closing the textarea, which is not what I want.</p> <p>I'm having a hard time understanding why the event is called. Is this the phenomenon called <em>event propagation</em> I heard about? How can I work around or fix this behaviour?</p> <p>Here's my code related to the situation (lightened a bit) : </p> <p>Javascript</p> <pre><code>// Create a function that updates a table cell once the textarea loses focus (do not be confused with "losing its Ford Focus") function createBlurFunction( cell, textArea, functionName ) { return function() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var result = JSON.parse(xmlhttp.responseText)[0]; /* Do stuff with AJAX result */ } } // Empty cell cell.innerHTML = ""; // Send AJAX request xmlhttp.open("GET","Some AJAX parameters", true); xmlhttp.send(); } } // textArea is already defined somewhere else textArea.addEventListener('blur', createBlurFunction( cell, textArea, cell.title ), false); </code></pre> <p>Thanks!</p> <p><strong>EDIT 1 :</strong></p> <p>I used a similar structure somewhere else in my web page (textarea that goes away when you click outside) and the behaviour is different : the textarea does not go away when I click inside of it. </p> <p>However, I used Copy/Paste from the code above, so I might be suspecting a code error or something...</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload