javascript - FireFox - 隐藏 DIV 后切换焦点？

Question

我有一个包含 2 个子元素的 contenteditable="true" div。当开始编辑 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
});