Safari contenteditable div 焦点

Question

当我点击一个内容可编辑的 div 时，表示我可以写作的垂直线在焦点上消失了。我必须单击两次才能使其可见并能够书写。

只有在以下情况下才会失败：
- Safari（最新版本 12.0。我无法检查旧版本）
- contenteditable div（在表单中效果很好）
- 专注
- 仅当用户单击文本时。如果用户点击 div 但在文本之外，它会很好地工作。

为了找到问题，我简化了很多案例。我不知道还能尝试什么。
- 这只是 Safari 中的一个错误吗？
- 知道如何让它运作良好吗？

$(function(){
				
	$(".text").focus(function () {
		if ( ($(this).text() == "one thing") ) {
			$(this).text("");
		}
	});

	$(".text").blur(function () {
		if ($(this).text() == "") {	
			$(this).text("one thing");
		}
	});

})

.text {
	width: 50%;
	padding: 6px 10px;
	background-color: whiteSmoke;
	outline:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text" contenteditable="true">one thing</div>

Answer 1

尝试过去发布的这个解决方案：

Safari 默认将用户选择的 CSS 设置为无。您可以使用：

[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

来源：contenteditable not working in safari but works in chrome

Answer 2

要添加到已经给出的解决方案中，这是正确的，您需要将 [contenteditable] 替换为 css 文件中的类选择器。因此，无论哪个元素是 contenteditable，您都可以将其放置在那里。例如：

.content-to-edit-fake-class-name {
-webkit-user-select: text;
user-select: text;
}