javascript - Safari contenteditable div 焦点

Question

当我点击一个 contenteditable 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