I have data inserted into HTML like this:
<p each="{this.holidayListFirstPart}" if="{hdate}">
<span id="{description}" onclick={showInputBox}>{hdate}:{description}</span>
</p>
I am trying to convert the span
tag to textarea
on mouseclick so that the user can edit the text like this:
showInputBox(e) {
self.textContent = document.getElementById(e.target.id).innerHTML;
var mySpan = document.getElementById(e.target.id);
var customTextArea = document.createElement("textarea");
customTextArea.id = e.target.id;
customTextArea.setAttribute('onmouseout','{focusGone}');
customTextArea.innerHTML = self.textContent;
mySpan.parentNode.replaceChild(customTextArea, mySpan);
}
focusGone(e){
console.log("lost focus");
}
The problem is when the user leaves the textarea after editing the text, its throwing error that focusGone
function is not defined:
Uncaught ReferenceError: focusGone is not defined
How do I make this work in riotjs?
setAttribute
probably doesn't work when you set it to{focusGone}
, which is not a function but some sort of templating that probably runs earliercustomTextArea.setAttribute('onmouseout','focusGone()');
which didn't work either