textarea 焦点丢失是为什么？

Question

描述

页面有有个div显示文本信息， 鼠标点击div会把隐藏的textarea显示出来，修改后会把文本同步回div，失去焦点并隐藏textarea
用了div的点击事件和textarea的onblur事件， input事件做内容同步

问题

进入textarea修改状态，随便输入一些东西，
然后用鼠标点到第一行，焦点丢失。也输出不了东西了。
这个问题怎么解决

演示地址： https://m453y4q39y.codesandbo...

Answer 1

看了一下你展示的页面有可能是冒泡导致失去焦点

你点击textarea 会冒泡到div

Answer 2

问题出在绑定的元素上
$(".modify-remark").on("click",...) 这个绑定在了父元素上,所以你在点击textarea的时候事件也会触发，所以每次点击都会去赋值。你可以把事件绑定在子元素上

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

你的元素查找写的有点冗长，你可以看看我写的demo
https://codepen.io/ars_qu/pen...

Answer 3

$(".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();
});

就这么简单