双击 IE 11 上的 contentEditable 高亮问题

Question

我有一个可编辑的跨度。每当有人单击 span 时，它就会调用 onclick 函数，并将 contentEditable 设置为 True 并设置一些样式。然后我使用 onblur 通过 ajax 调用将值保存到数据库中。当我在 chrome 上运行并双击时，它是 selecting 特定值。例如：如果有一个值 "mm/dd/yyyy" 并且如果我双击 yyyy 然后它突出显示它，我就可以更改它。但是这个功能。不适用于 Internet Explorer。在 IE 上，当我双击时，它可以 select 但不会从我的键盘键获取任何输入。再次当我双击时，它工作正常。我知道这很难解释，但我希望它在 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>，你可以将 <input> 的 border 设置为 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>

双击 IE 11 上的 contentEditable 高亮问题

Double click contentEditable highlight issue on IE 11

javascript

jquery

internet-explorer