FireFox - 隐藏DIV后切换焦点？

Question

我有一个 contenteditable =“true” div，它有2个子元素。当开始编辑div时，我想隐藏正确的元素。这在CHROME / EDGE中正常工作。

在FireFox上，我的问题是，如果用户单击右侧DIV，而不是将光标焦点切换到左侧DIV（因为右侧DIV现在已隐藏），焦点将保留在左侧div上。基本上光标消失了。

这个解决方案吗？

window.onload = function() {
	$('.parent').on('click',function(evt) {
		$('.age').css('display','none');
	});
}

.parent{
	display:flex;
	flex-direction:row;
	font-size:18;
}

.name{
	margin-right:6px;
}

.age{
	border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" contenteditable="true">
<div class="name">On Chrome/EDGE, clicking the div with the red border will hide and switch the focus (cursor) to this div. In FireFox it does not work and our cursor/focus is lost.</div>
<div class="age">(Click on this div to see the problem)</div>
</div>

Answer 1

$('.parent').on('click',function(evt) {
    $('.age').css('display','none');
    $('.name').focus(); // Trigger focus on the .name element
});