HTML contenteditable 在标签进入时有效，但在点击进入时无效

Question

我想要 span 内容可编辑，所以我已将 contentEditable ="true" 属性添加到 span 元素，但只有当我使用键盘进入字段时它才可编辑，但如果我用鼠标光标单击不可编辑的文本。我认为可能有一些事件监听器在做一些奇怪的事情，所以我做了一个令人讨厌的 hack 来覆盖 onclick 和 onfocus 事件，不做任何事情并且不传播到祖先事件监听器

<span 
    onclick="javascript:return false;" 
    onfocus="javascript:return false;"  
    contentEditable ="true">Edit Me</span>

例如，标题 Gold Coast Waters 3 Day Forecast 不起作用，应该可以在以下页面上进行编辑： Non-Working Example

下面 contenteditable 的 fiddle 有效，所以我的代码中有些东西阻止了它的工作，我似乎无法缩小它的范围。

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <span contenteditable="true">Hello World</span>
  <button>Change color</button>
</div>

关于当我点击 span 时阻止编辑的任何想法？

Answer 1

所以事实证明 $(".sortable").disableSelection() 有点令人讨厌，它会阻止带有 contenteditable="true" 的元素被编辑。我从我的代码中删除了该行，元素现在可以编辑了。

此外，jQuery 不鼓励使用该函数：http://api.jqueryui.com/disableselection/

HTML contenteditable 在标签进入时有效，但在点击进入时无效

HTML contenteditable works when tabbed into but not when clicked into

html

javascript

contenteditable