IE 11上的双击contentEditable高亮问题

Question

我的跨度可编辑。每当有人单击跨度时，它就会调用onclick函数，并将contentEditable设置为True，并设置一些样式。然后，我使用onblur通过ajax调用将值保存到数据库中。当我在chrome上运行并双击时，它会选择特定的值。例如：如果有一个值“ mm / dd / yyyy”，并且我双击yyyy，则它会突出显示，并且可以更改它。但是这个功能。在Internet Explorer上无法使用。在IE上，当我双击时，它可以选择但不能从我的键盘键获取任何输入。同样，当我双击时，它工作正常。我知道很难解释，但是我希望它在IE中也能正常工作。下面是我的onclick函数。

function makeElementEditable(span){
  span.style.border = "1px solid black";
  span.style.fontSize  ="15px";
  span.style.padding = "5px";
  span.contentEditable = true;
  }
});
}

Answer 1

我在IE中进行了测试，并复制了该问题。我认为这是由于不同浏览器中的行为不同所致。这是设计使然。

您可以尝试使用<input>而不是<span>作为IE中的解决方法。要使其尽可能像<span>，可以将border的<input>设置为none：

function makeElementEditable(span) {
  span.style.border = "1px solid black";
  span.style.fontSize = "15px";
  span.style.padding = "5px";
  span.style.width = "90px";
  span.contentEditable = true;
}

<div>
  <input type="text" onclick="makeElementEditable(this)" value="mm/dd/yyyy" style="border:none" />
</div>