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

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

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

Safari可编辑的div焦点

2 个答案: