时间戳

首页 > 解决方案 > 光标位置不在 Microsoft Edge 中 contentEditable div 中占位符的开头

html - 光标位置不在 Microsoft Edge 中 contentEditable div 中占位符的开头

问题描述

可竞争 div 上的光标不是占位符的开始，而它在 chrome 和 firefox 中工作正常。

div 是自动聚焦的，光标必须从初始位置开始显示。

在此处输入图像描述

html

<div id="" class="chatInput" contenteditable="true" placeholder="Type something..." autofocus="autofocus"></div>

css

.cInput{
padding: 5px 15px;
    color: var(--text-base-volumeone);
    outline: none;
    cursor: text;
    max-height: 32px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    min-height: 32px;
    font-family: LATORegular;
    font-size: 13px;
    vertical-align: bottom;
    transition: border-color 0.25s ease;
    caret-color: var(--caret-color);
    position: relative;
    white-space: initial;
}

标签： htmlcsscursormicrosoft-edgecontenteditable

解决方案

我尝试搜索该问题，它看起来像是 MS Edge 旧版浏览器中的一个已知问题。

这是您可以使用 MS Edge 旧版浏览器尝试的解决方法。

<!DOCTYPE html>
<html>
<head>

<style>
[contenteditable=true] {
  position: relative;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  margin: auto;
}

#myDiv {
  border: 1px dashed #AAA;
  width: 290px;
  padding: 5px;
  text-align: left;
  height: 16px;
}
</style>


</head>
<body>

<div id="myDiv" contenteditable="true" placeholder="Enter text here..."></div>


</body>
</html>

MS Edge 旧版浏览器中的输出：

在此处输入图像描述

此解决方案使用 CSS 代码。我们可以注意到光标在 div 之外几乎没有显示。如果这不是可取的，那么您可能需要使用 JavaScript 或 Jquery 将光标显示在起始位置。

此示例使用 JQuery。

推荐阅读