Question

https://jsfiddle.net/xpvt214o/551094/在这里放置了代码。

下面是代码。

HTML

<div class="contenteditable" id="id_logo" >
<a href="https://jsfiddle.net">Some logo</a>
</div>

<div id="contenteditable_menu_ahref" style="display:none;" >
<input type="text" id="ahref_url" placeholder="Url" />
</div>

<span id="some_result"></span>

jquery

var process_href = function (event) {

event.preventDefault();
$('.contenteditable').attr("contenteditable","true");
$("#contenteditable_menu_ahref").css({'display':'block'});

$("#ahref_url").val( $(event.target).attr('href') );
$("#some_result").html( $(event.target).attr('href') );

} 
$(document).on("click", ".contenteditable", process_href);
$(document).on("keyup", ".contenteditable", process_href);

执行以下操作：

1）单击文本Some logo。打开带有包含URL的输入字段的菜单。

2）再次单击文本Some logo（在中间的某个地方），例如在单词之间。然后用键盘开始输入一些东西。网址将从输入字段中消失，但仍保留在span中。这种行为是在Chrome和Firefox中。在Edge网址中仍然存在。

问题：

1）如何在输入字段中保留网址？目前看来，我从span

那里获得了解决方案

2）为什么这样的行为。作为Chrome的检查控制台，在click上有target:a attributes，但是在keyup上找不到target:a，只能看到target:div

Answer 1

1）如何在输入字段中保留URL？

var process_href = function (event) {

  event.preventDefault();
  const link = $(this).children('a').attr('href');
  $('.contenteditable').attr("contenteditable","true");
  $("#contenteditable_menu_ahref").css({'display':'block'});

  $("#ahref_url").val(link);
  $("#some_result").html(link);

} 
$(document).on("click", ".contenteditable", process_href);
$(document).on("keyup", ".contenteditable", process_href);

您可以使用this或event.currentTarget来获取运行处理程序的元素，在您的情况下为DIV。

event.target给出了导致事件发生的最深层嵌套的元素。

2）为什么会这样？

这是因为事件冒泡。 DIV的每个子元素都将其click事件沿DOM冒泡，直到DIV的click事件处理程序将其捕获为止。建议您阅读这篇文章。 https://javascript.info/bubbling-and-capturing

Answer 2

问题是 class =“ contenteditable” 被放在<< em> div >元素上。

只需将您的可编辑字段更改为<< em> a >标记，它将按预期工作。

HTML：

    <div class="logo header_class" id="id_logo" >
    <a class="contenteditable" href="https://jsfiddle.net">Some logo</a>
    </div>

    <div id="contenteditable_menu_ahref" class="display_none" >
    <input type="text" id="ahref_url" placeholder="Url" />
    </div>


    <span id="result_of_activities"></span>

为什么这种行为会出现在chrome中？

答案：

$（document）.on（“ keyup”，“ .contenteditable”，process_href）;

这将找到具有 contenteditable 类的元素（在本例中为<< em> div >），并调用函数 process_href ，该函数将返回<用于attr（'href'）的em> undefined ，这解释了为什么<< em> span >元素没有更改的原因，因为html（undefined）不会做任何事情。 Click事件也可以很好地工作，因为它被设计为在类为 contenteditable 的位置获取确切的click元素。

在输入字段中键入内容时，$（event.target）.attr（'href'）消失

2 个答案: