Question

我想让span内容可编辑，所以我向span元素添加了contentEditable ="true"属性，但是只有当我用键盘跳入该字段时，该属性才可以编辑，但是如果我单击使用鼠标光标在文本上不可编辑。我以为可能会有一些事件侦听器在做一些时髦的事情，所以我做了一个讨厌的骇客，以覆盖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的小提琴起作用了，所以我的代码中有一些东西阻止了它的工作，我似乎无法缩小其范围。

// 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时有效，但单击时则无效

1 个答案: