Why is textarea focus lost?

description

there is a div displaying text information on the page. Clicking div with the mouse will show the hidden textarea. After modification, the text will be synchronized back to div, losing focus and hiding textarea
using the click event of div and the onblur event of textarea, and the input event for content synchronization

question

enter the textarea modification state, type something casually,
then click to the first line with the mouse, and the focus is lost. I can"t output anything either.
how to solve this problem

demo address: https://m453y4q39y.codesandbo...

Javascript jquery html html5

Apr.26,2022

take a look at the page you displayed, it is possible that bubbling may lead to loss of focus

if you click textarea, you will bubble to div

the problem lies in the binding element
$(".modify-remark"). On ("click",...) this is bound to the parent element, so the event will also trigger when you click textarea , so each click will be assigned. You can bind events to child elements

$('.modify-remark>div').on('click',function(){
   $(this).hide();
   $(this).next().show();
   const remark = $(this).text();
   $(this).text(remark);
})

your element search is a bit lengthy. You can take a look at my demo
https://codepen.io/ars_qu/pen...

$(".modify-remark").on("click","div", function() {
    var $this = $(this), txt = $this.text();
    $this.hide().next("textarea").text(txt).show().focus();
}).on("blur","textarea", function() {
    var $this = $(this), txt = $this.val();
    $this.hide().prev("div").text(txt).show();
});

it's that simple

Previous: Authentication between two websites

Next: Js regularly matches the src value in img in span.