Jquery 输入字段中的键控消失$（event.target）.attr（'；href'；）

这里放置了代码

下面是代码

Html

执行以下操作：

1） 单击文本

一些徽标

。打开包含url的输入字段的菜单

2） 再次单击文本

某些徽标（中间的某个位置），例如，在单词之间。然后用键盘开始打字。Url从输入字段中消失，但仍保留在
span
中。这种行为在Chrome和Firefox中都存在。在边缘url仍然存在

问题:

1） 如何将url保存在输入字段中？目前看来，我从
span

2） 为什么会有这样的行为。在Chrome的控制台上选中，在
上单击
有
目标：a属性
，但在
键控
上找不到
目标：a
，只查看
目标：div
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事件处理程序捕捉到它为止。我建议你阅读这篇文章
 问题是class=“contenteditable”被放在元素上

只需将可编辑字段更改为标记，它将按预期工作

HTML:



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

答复:

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

这将找到类contenteditable的元素（本例为was），并调用函数process_href，该函数将返回undefined for attr（'href'），这解释了为什么元素没有更改，因为html（undefined）不会做任何事情。同样的方法也适用于Click事件，因为它被设计为在类可编辑的地方获得Click的确切元素
 @Diwya-Mehta。谢谢你的回答。但若用户希望部分文本作为链接，而部分文本不作为链接，那个该怎么办呢。并且整个文本必须是可编辑的。下面是一个例子
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);

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);

    <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>